All heading styles from h1 through h6. To use you can &:extend(h1) through &:extend(h6) or apply .h1 through .h6

h1 Heading Level 1

h2 Heading Level 2

h3 Heading Level 3

h4 Heading Level 4

h5 Heading Level 5

h6 Heading Level 6

                                
<h1>h1 Heading Level 1</h1>
                                
                            

All standard paragraphy info and styling including strong, bold, italic and emphasis.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

All standard lists follow browser defaults. There is a .reset-list helper class to remove the bullets and numerals if needed.

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

                                
<ul>
    <li>This is a list item in an unordered list</li>
    <li>
        Lists can be nested inside of each other
        <ul>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an unordered list</li>
        </ul>
    </li>
</ul>
                                
                            

• This is a clean list with no styles ul.reset-list
• This is a clean list with no styles #2

                                
<ul class="reset-list">
    <li>This is a clean list with no styles <code>ul.reset-list</code></li>
    <li>This is a clean list with no styles #2</li>
</ul>
                                
                            

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

                                
<ol>
    <li>This is a list item in an unordered list</li>
    <li>This is the last list item</li>
</ol>
                                
                            

Use the .button class on an a, button, or input element. By default buttons are set to be inline-block elements, but transition to be block level elements at the @grid-float-breakpoint. Create additional button styles by using the .button-variant(...) mixin.

                                
<div class="buttons-set">
    <button type="submit" class="button button-default">Submit</button>
    <a href="#" class="button button-default">Anchor</a>
    <input type="submit" class="button button-default" value="Submit">
</div>
                                
                            

Add the disabled attribute to buttons to prevent a user from interacting with the element. By default disabled buttons appear lighter.

                                
<div class="buttons-set">
    <button type="submit" class="button button-default" disabled>Submit</button>
</div>
                                
                            

Add the .button-block class to your button to have it been width: 100%;.

                                
<div class="buttons-set">
    <button type="submit" class="button button-default button-block">Submit</button>
</div>