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

<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

<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>

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis hendrerit quam, ac tristique nisl. Aenean sed velit lobortis, interdum ante in, ullamcorper tortor.

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

Heading 2

Vivamus nunc purus, malesuada at lacinia a, pellentesque nec enim. Vestibulum et est euismod, ultrices lectus non, aliquam magna. Proin viverra tincidunt mauris ac interdum. Aenean nec arcu quis turpis accumsan dignissim et ut risus.

Heading 3

  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

Heading 4

Maecenas consequat, quam id rhoncus convallis, erat massa finibus justo, a interdum justo est eget tellus. Ut mattis dolor dolor. Maecenas vitae congue diam. Nullam consequat lacus mattis, faucibus arcu ut, auctor ex.

Heading 5

Crumbtrail

(extras)

Blog

A Blog Post

Tags:

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...

Tags

Feeds