Headings & paragraphs
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus perspiciatis labore quis, qui, animi hic autem est aut beatae sit!
Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis modi a numquam commodi provident amet.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut error voluptates optio dolores vel libero. Odit hic nostrum a tempora, facere aut, quia.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, reiciendis.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, repellendus illum ad.
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia fuga ducimus dolorem suscipit.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus perspiciatis labore quis, qui, animi hic autem est aut beatae sit!</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis modi a numquam commodi provident amet.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut error voluptates optio dolores vel libero. Odit hic nostrum a tempora, facere aut, quia.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, reiciendis.</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, repellendus illum ad.</p>Text utility classes
We include some helpful utility classes if you need to align your text quickly. Use .text-centre or .text-center to centre your text. Use .text-right to right align. Or use .text-left to left align.
As we are British, we decided to include two spellings for our centred text : .text-centre and .text-center — use whichever one you prefer..
Left aligned: Lorem ipsum dolor sit amet.
Centre aligned: Lorem ipsum dolor sit amet.
Right aligned: Lorem ipsum dolor sit amet.
<p class="text-left">Lorem ipsum dolor sit amet.</p>
<p class="text-centre">Lorem ipsum dolor sit amet.</p>
<p class="text-right">Lorem ipsum dolor sit amet.</p>Text-level semantics
The a element example
The abbr element example
The b element example
The cite element example
The code element example
The del element example
The dfn element example
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element
example inside
a q element
The s element example
The samp element example
The small element example
The span element example
The strike element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
Ordered lists
- list item 1
- list item 1
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
<ol>
<li>list item 1</li>
<li>list item 1
<ol>
<li>list item 2</li>
<li>list item 2
<ol>
<li>list item 3</li>
<li>list item 3</li>
</ol>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ol>Unordered lists
- list item 1
- list item 2
- list item 2a
- list item 2b
- list item 2bi
- list item 2bii
- list item 2c
- list item 2d
- list item 3
- list item 4
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2a</li>
<li>list item 2b
<ul>
<li>list item 2bi</li>
<li>list item 2bii</li>
</ul>
</li>
<li>list item 2c</li>
<li>list item 2d</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>Unstyled [un]ordered lists
Add an .unstyled class to any <ul> or <ol> to remove the default bullets, numbering and margins.
- ul list item 1
- ul list item 2
- ul list item 3
- ul list item 4
- ol list item 1
- ol list item 2
- ol list item 3
- ol list item 4
<ul class="unstyled">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<ol class="unstyled">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ol>