# Style Demo

## Text

These are plain styles for plain HTML. No formatting classes involved in this section!

### Headings

# Heading 1

    # Heading 1
    <h1>Heading 1</h1>

## Heading 2

    ## Heading 2
    <h2>Heading 2</h2>

### Heading 3

    ### Heading 3
    <h3>Heading 3</h3>

#### Heading 4

    #### Heading 4
    <h4>Heading 4</h4>

##### Heading 5

    ##### Heading 5
    <h5>Heading 5</h5>

### Formatting

Links

    [Link text](http://example.com)
    <a href="http://example.com">Link text</a>

Emphasis

    _Emphasis_
    <em>Emphasis</em>

Strong Emphasis

    *Strong Emphasis*
    <strong>Strong Emphasis</strong>

`Inline code`

    `Inline code`
    <code>Inline code</code>

`Keyboard input`

    <kbd>...</kbd>

`Sample output`

    <samp>...</samp>

### Text Blocks

#### Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue volutpat. In lobortis semper scelerisque. Praesent pharetra augue vitae hendrerit aliquet. Aliquam vel ex felis. Nam gravida accumsan odio eu semper. Sed id leo tellus. Suspendisse pretium ligula et cursus hendrerit. Ut commodo metus a efficitur tempus. Fusce vel enim eget velit fringilla congue.

    Lorem ipsum dolor sit amet...

    <p>Lorem ipsum dolor sit amet...</p>

#### Code

    use strict;
    use warnings;
    use feature qw( say );

    package Hash::Object;

    sub new {
        my ( $class, %self ) = @_;
        return bless { %self }, $class;
    }

    use strict; use warnings; use feature qw( say ); package Hash::Object; sub new { my ( $class, %self ) = @_; return bless { %self }, $class; }

        # 4-space indent
        use strict;
        use warnings;

    <pre><code>use strict;
    use warnings;</code></pre>

#### Blockquote

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue volutpat. In lobortis semper scelerisque. Praesent pharetra augue vitae hendrerit aliquet. Aliquam vel ex felis. Nam gravida accumsan odio eu semper. Sed id leo tellus. Suspendisse pretium ligula et cursus hendrerit. Ut commodo metus a efficitur tempus. Fusce vel enim eget velit fringilla congue. Some Author

    > Lorem ipsum dolor sit amet...

    <blockquote>
    Lorem ipsum dolor sit amet...
    <cite>Citation</cite>
    </blockquote>

### Lists

#### Ordered

1. Lorem ipsum dolor sit amet
2. Vivamus quis hendrerit quam
3. Aenean sed velit lobortis, interdum
4. Vivamus nunc purus, malesuada at lacinia
5. Aenean nec arcu quis

    1. Lorem ipsum dolor sit amet
    2. Vivamus quis hendrerit quam
    3. Aenean sed velit lobortis, interdum

    <ol>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Vivamus quis hendrerit quam</li>
        <li>Aenean sed velit lobortis, interdum</li>
    </ol>

#### Unordered

- Maecenas consequat, quam id rhoncus
- Massa finibus justo, a interdum
- Nullam consequat lacus mattis
- Proin viverra tincidunt mauris ac interdum
- Interdum ante in, ullamcorper tortor

    * Lorem ipsum dolor sit amet
    * Vivamus quis hendrerit quam
    * Aenean sed velit lobortis, interdum

    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Vivamus quis hendrerit quam</li>
        <li>Aenean sed velit lobortis, interdum</li>
    </ul>

## Classes

### Lists

#### Inline lists

- Lorem
- Ipsum
- Dolor

    <ul class="list-inline">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>

1. Lorem
2. Ipsum
3. Dolor

    <ol class="list-inline">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ol>

### Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue volutpat. In lobortis semper scelerisque. Praesent pharetra augue vitae hendrerit aliquet.

    <img src="#" class="u-pull-left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue volutpat. In lobortis semper scelerisque. Praesent pharetra augue vitae hendrerit aliquet.

    <img src="#" class="u-pull-right">

## Widgets

### Pager

#### Enabled

- ← Older
- Newer →

    <ul class="pager">
      <li class="prev">
        <a class="button button-primary" rel="next" href="#">
          &larr; Older
        </a>
      </li>
      <li class="next">
        <a class="button button-primary" rel="prev" href="#">
          Newer &rarr;
        </a>
      </li>
    </ul>

#### Disabled

- ← Older
- Newer →

    <ul class="pager">
      <li class="prev">
        <a class="button disabled" rel="next" href="#">
          &larr; Older
        </a>
      </li>
      <li class="next">
        <a class="button disabled" rel="prev">
          Newer &rarr;
        </a>
      </li>
    </ul>

### Sidebar

Recommended width is `class="three columns"`.

    <div class="three columns sidebar">...</div>

### Crumbtrail

- Foo
- Bar
- Baz

(extras)

## Blog

# A Blog Post

Tags: massa efficitur semper

Posted on 2014-01-01 by preaction

Originally posted as: Another Blog Post on medium.com.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue volutpat. In lobortis semper scelerisque. Praesent pharetra augue vitae hendrerit aliquet. Aliquam vel ex felis. Nam gravida accumsan odio eu semper. Sed id leo tellus. Suspendisse pretium ligula et cursus hendrerit. Ut commodo metus a efficitur tempus. Fusce vel enim eget velit fringilla congue.

Nullam massa neque, viverra id efficitur in, bibendum eget odio. Suspendisse potenti. Nunc suscipit, erat eu pulvinar scelerisque, orci leo tempor ante, eget rutrum massa purus vitae velit. Curabitur nec ex vitae ipsum blandit aliquet ut eu sem. Cras vel orci lorem. In dictum iaculis massa, tempor faucibus mi tempus sit amet. Donec porttitor diam et nulla facilisis mattis.

Continue reading A Blog Post...

- ← Older
- Newer →