Type
h1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
When to use
Appears only once at the top of any given page
<span class="light">
</span>h2
Lorem span dolor sit amet elit nullum vitae.
When to use
Used as a heading for a piece of content within a page
<h2>
Lorem span dolor sit amet elit nullum vitae.
</h2>h3
Quasi odit debitis, natus rem reiciendis, eum harum!
When to use
Used as a heading for a piece of content within a page and panels
<h3>
Lorem span dolor sit amet elit nullum vitae.
</h3>h4
Corporis veritatis eveniet dolor, velit.
When to use
Used as a heading for a piece of content within a page and panels
<h4>
Lorem span dolor sit amet elit nullum vitae.
</h4>strong
When to use
Used for strong emphasis.
<strong>
Lorem span dolor sit amet elit nullum vitae.
</strong>Em
When to use
Avoid using this. If you want to emphasize text, use Strong (above). This pattern should be removed.
<em>
Lorem span dolor sit amet elit nullum vitae.
</em>Link
When to use
Use to link off to other pages that are not the primary route from the page.
<a href="#">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</a>Lead
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
When to use
Appears after H1 as a brief overview of the page or section
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>Micro
When to use
This is used mostly within narrow columns. panels or as supportive text for buttons or other input fields. It should not be used for paragraphs of copy.
<small class="micro">
Image credit: Lorem span dolor sit amet.
</small>Light
When to use
Used to de-emphasize content that is less important.
<span class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>UL
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Sint atque magni quam delectus ea provident similique.
- Quasi odit debitis, natus rem reiciendis, eum harum.
When to use
Used for an unordered list of items. This can also contain links.
<ul>
</ul>OL
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Sint atque magni quam delectus ea provident similique.
- Quasi odit debitis, natus rem reiciendis, eum harum.
When to use
Used for a numbered list of items, or a set of instructions. This can also contain links.
<ol>
</ol>