Typography
Headings
Available <h1>
through <h6>
, and through .heading--xxsmall
to .heading--large
+ .heading
modifiers, for when you want to match the font styling of a heading without changing the markup.
A special appearance of heading is also posible via .heading-alt
. Used in table headings, definition list terms, etc.
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
This is an h6 heading
This an alt heading
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
<h6 class="heading-alt">This an alt heading</h6>
Light Headings
You may have bodies of text where you would like to have less empahsis on the title or to enforce a more visible hierarchy of sections.
This is a light h1 heading
This is a light h2 heading
This is a light h3 heading
This is a light h4 heading
This is a light h5 heading
This is a light h6 heading
This an alt light heading
<h1 class="light">This is a light h1 heading</h1>
<h2 class="light">This is a light h2 heading</h2>
<h3 class="light">This is a light h3 heading</h3>
<h4 class="light">This is a light h4 heading</h4>
<h5 class="light">This is a light h5 heading</h5>
<h6 class="light">This is a light h6 heading</h6>
<h6 class="light heading-alt">This an alt light heading</h6>
Blockquotes
As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.
<blockquote>
<p>As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly
– so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc,
citations almost always appear as part of the quotation – it’s highly conventional.</p>
<footer>
<cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
</footer>
</blockquote>
Inline text elements
Highlight. Deleted. Innacurate or irrelevant.
Added. Underlined. Small text.
Bold. Italicized.
The abbr tag is used to represent an abbreviation.
<p><mark>Highlight</mark>. <del>Deleted</del>. <s>Innacurate or irrelevant</s>.</p>
<p><ins>Added</ins>. <u>Underlined</u>. <small>Small text</small>.</p>
<p><strong>Bold</strong>. <em>Italicized</em>.</p>
<p>The abbr tag is used to represent an <abbr title="attribute">abbreviation</abbr>.</p>
Lists
Unordered
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ul>
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<ol>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
</ol>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ol>
Descriptive
- Description list term
- Description list description.
- Euismod lorem ipsum dolor sit amet
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Third.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Yet another term
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl>
<dt>Description list term</dt>
<dd>Description list description.</dd>
<dt>Euismod lorem ipsum dolor sit amet</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dd>Third.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Yet another term</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
Horizontal Descriptive
- Description list term
- Description list description.
- Euismod lorem ipsum dolor sit amet
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Third.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Yet another term
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>Description list term</dt>
<dd>Description list description.</dd>
<dt>Euismod lorem ipsum dolor sit amet</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dd>Third.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Yet another term</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
Horizontal rulers
<hr />
Tables
Example
Numbers | ||||
---|---|---|---|---|
# | Lorem | Ipsum Dolor | Sit Amet | Sit Amet |
1 | Aliquam erat | Volutpat | 5555 | 5555 |
2 | Aenean | Finibus | 5000 | 5555 |
3 | Phasellus | Consequat | 10000 | 5555 |
<table class="table">
<thead>
<tr>
<th colspan="3"></th>
<th class="upper-text" colspan="2">Numbers</th>
</tr>
<tr>
<th>#</th>
<th>Lorem</th>
<th><a class="table__sort table__sort--none" title="Sort column"><span>Ipsum Dolor</span></a></th>
<th class="number">Sit Amet</th>
<th class="number">Sit Amet</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Aliquam erat</td>
<td>Volutpat</td>
<td class="number">5555</td>
<td class="number">5555</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Aenean</td>
<td>Finibus</td>
<td class="number">5000</td>
<td class="number">5555</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Phasellus</td>
<td>Consequat</td>
<td class="number">10000</td>
<td class="number">5555</td>
</tr>
</tbody>
</table>
Code
Inline
<article>
.
This contains code rendered inline: <code><article></code>.
Preformatted
<p>Lorem ipsum dolor...</p>
<pre><p>Lorem ipsum dolor...</p></pre>
User input
This contains instructions: lorem ipsum <kbd>cd</kbd> dolor sit <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>