Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
1980s
<h2 class="header-light header-light-lg">1980<span class="tiny">s</span></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ante at orci vestibulum elementum. Proin tristique et turpis non congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ante at orci vestibulum elementum. Proin tristique et turpis non congue.
<p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ante at orci vestibulum elementum. Proin tristique et turpis non congue.</p>
<strong>Some strong text</strong>
<em>Some emphasised text</em>
- List item A
- List item B
- List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.
<ul class="list">
<li>List item A</li>
<li>List item B</li>
<li>List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.</li>
</ul>
- List item A
- List item B
- List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.
<ol class="list">
<li>List item A</li>
<li>List item B</li>
<li>List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.</li>
</ol>
Title of list
- List item A
- List item B
- List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.
Title of list
- List item A
- List item B
- List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.
<h4>Title of list</h4>
<ul class="tick [modifier class]">
<li>List item A</li>
<li class="cross">List item B</li>
<li>List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.</li>
</ul>
<ul class="list with-thumbnails">
<li><a href="">List item A</a> <div class="thumb"><img src="http://lorempixel.com/300/300/"></div></li>
<li><a href="">List item B</a> <div class="thumb"><img src="http://lorempixel.com/300/300/"></div></li>
<li><a href="">List item C</a> <div class="thumb"><img src="http://lorempixel.com/300/300/"></div></li>
</ul>
- List item A
- List item B
- List item C
<ul class="none">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
</ul>
- List item A
- List item B
- List item C
<ul class="list-divider">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
</ul>
Title of list
- List item A
- List item B
- List item C
<h4>Title of list</h4>
<ul class="none has-title">
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
</ul>
- List item A
- List item B
- List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.
<ul class="list-inline-bordered">
<li>List item A</li>
<li>List item B</li>
<li>List item that is really long to demonstrate that when it wraps it does not fall under the bullet-point.</li>
</ul>
2.13 #permalink Status
Always give a status a skin class and an appropriate icon . Never let it go out as just a single .status, as it will not be styled correctly
Status
Status
Status
Status
Status
Status
<p class="status [modifier class]"><span class="icon icon-star"></span> Status</p>
2.14 #permalink Lists in blue band
When in a blue band the active and hover states will be white, in normal bands they will appear blue
Title of list
<h2>Title of list</h2>
<ul class="list list-alt">
<li><a href="">List item A</a></li>
<li class="active"><a href="">List item B</a></li>
<li><a href="">List item C</a></li>
</ul>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet non nisl eget dapibus. Proin ac dui eget lectus mollis semper vitae nec nisl. Curabitur dui lorem, sodales vel quam molestie, dictum vehicula eros."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet non nisl eget dapibus. Proin ac dui eget lectus mollis semper vitae nec nisl. Curabitur dui lorem, sodales vel quam molestie, dictum vehicula eros."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet non nisl eget dapibus. Proin ac dui eget lectus mollis semper vitae nec nisl. Curabitur dui lorem, sodales vel quam molestie, dictum vehicula eros."
<blockquote class="[modifier class]">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet non nisl eget dapibus. Proin ac dui eget lectus mollis semper vitae nec nisl. Curabitur dui lorem, sodales vel quam molestie, dictum vehicula eros."</p>
<span class="author">- Some Name</span>
</blockquote>