elementary CSS

Typography

Headings

All HTML headings <h1> through <h6> are properly styled. Alternatively, you can apply an .h1 through .h6 class to an inline element to give it the styling of a block heading.

h1. elementary heading

h2. elementary heading

h3. elementary heading

h4. elementary heading

h5. elementary heading
h6. elementary heading
<h1>h1. elementary heading</h1>
<h2>h2. elementary heading</h2>
<h3>h3. elementary heading</h3>
<h4>h4. elementary heading</h4>
<h5>h5. elementary heading</h5>
<h6>h6. elementary heading</h6>

Body copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend iaculis velit eu aliquet. Donec nibh mi, accumsan ut tempor vitae, bibendum sit amet ligula. Aenean fermentum pharetra adipiscing. Nam eget nisl eros. Duis cursus porttitor urna, sit amet consequat neque porttitor a. Vivamus vel odio ut lorem aliquet facilisis. Praesent tincidunt dignissim varius. Suspendisse lobortis fermentum libero eget imperdiet. Suspendisse lobortis ante mollis dolor tristique lacinia. Vivamus porta libero sed felis suscipit bibendum. Nam vulputate suscipit viverra. Pellentesque facilisis, lectus ac consectetur mattis, urna libero sagittis lectus, et porta lectus ligula et orci. Maecenas vulputate, turpis eget porttitor ullamcorper, felis massa molestie arcu, a molestie erat tellus nec nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec eleifend mi arcu, ac placerat leo.

<p>. . .</p>

Miscellaneous elements

Anchor
abbr.
Deleted
Inserted
code
Keyboard

<a href="">Anchor</a>
<abbr title="Abbreviation">abbr.</abbr>
<del>Deleted</del>
<ins>Inserted</ins>
<code>code</code>
<kbd>Keyboard</kbd>

Blockquote

Wrap a <blockquote> around any <p>, and wrap the citation <small>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante

Someone famous in Source Title 
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante</p>
    <small>Someone famous in Source Title</small>
</blockquote>

Buttons

Default

Add the .btn class to any <a>, <button>, or <input> to create a button.

For compatibility reasons, it is recommended to only use the <a> element for buttons

Anchor 
<a href="" class="btn">Anchor</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input">

For blue, red, dark, or light buttons, add .btn-blue, .btn-red, .btn-dark, or .btn-light to the class.

Blue Button Red Button Dark Button Light Button 
<a href="" class="btn btn-blue">Blue Button</a>
<a href="" class="btn btn-red">Red Button</a>
<a href="" class="btn btn-dark">Dark Button</a>
<a href="" class="btn btn-light">Light Button</a>

Large

Add the .btn-large class to a button to double its size.

Large Button Large Blue Button 
<a href="" class="btn btn-lg">Large Button</a>
<a href="" class="btn btn-blue btn-lg">Large Blue Button Button</a>

Active

Add the .active class to a button to keep it pressed.

Active Red Button 
<a href="" class="btn btn-red active">Active Red Button</a>

Disabled

Add the .disabled class to a button to generate the disabled style.

The .disabled class can be added to any element to disable clicking or highlighting on supported browsers.

Disabled Red Button Disabled Active Blue Button 
<a href="" class="btn btn-red disabled">Disabled Red Button</a>
<a href="" class="btn btn-blue active disabled">Disabled Active Blue Button</a>

Form Elements

Checkboxes

jquery.min.js and elementary.js are required for custom checkboxes and radios.


<input type="checkbox" id="c1">
<label for="c1">Checkbox</label>

Radios


<input type="radio" id="r1" name="r">
<label for="r1">Radio</label>

Text Fields




<input type="text" placeholder="Text">
<input type="search" placeholder="Search">
<input type="password" placeholder="Password">
<textarea placeholder="Textarea" rows="3"></textarea>

Slider

The slider widget is powered by jQuery UI, you can find the API here

<div class="slider"></div>

Progress Bar

The progress bar widget is powered by jQuery UI, you can find the API here

<div class="progress"></div>

Infobars

Infobars are block elements meant to convey contextual information and provide an action.

For more information on the usage of infobars, visit the elementary OS Guidelines on infobars

Info Button
Question Button
Warning Button
Error Button 
<div class="infobar info">
    <em>Info</em>
    <a href="" class="btn"><i class="icon-info"></i> Button</a>
</div>
<div class="infobar question">
    <em>Question</em>
    <a href="" class="btn"><i class="icon-starred"></i> Button</a>
</div>
<div class="infobar warning">
    <em>Warning</em>
    <a href="" class="btn"><i class="icon-lock"></i> Button</a>
</div>
<div class="infobar error">
    <em>Error</em>
    <a href="" class="btn"><i class="icon-error"></i> Button</a>
</div>

You can place an icon in the <em>

Warning Button 
<div class="infobar warning">
    <em><i class="icon-lock"></i> Warning</em>
    <a href="" class="btn">Button</a>
</div>

Navigation Bar

<nav>
    <li><a href="">Journal</a></li>
    <li><a href="">Support</a></li>
    <li><a href="">Developer</a></li>
    <li><a href="">Store</a></li>
</nav>

Icons

To add an icon to an inline element, use the following code:

<i class="[icon name]"></i>

For example, <i class="icon-music"></i> becomes

All of the icon- names can be found below: