Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
143 lines (109 sloc) 6.2 KB
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Typography Styleguide</title>
<link href="css/typography.css" rel="stylesheet">
<style>
/* Do not add CSS here -- this is just for controlling the line length */
body {
margin: 0 auto;
padding: 0;
max-width: 45rem;
}
</style>
</head>
<body>
<h1>Heading Level 1 <a href="#">Linked</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h2>Heading Level 2 <a href="#">Linked</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h3>Heading Level 3 <a href="#">Linked</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h4>Heading Level 4 <a href="#">Linked</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h5>Heading Level 5 <a href="#">Linked</a></h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h6>Heading Level 6 <a href="#">Linked</a></h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h1 class="yotta">Yotta Size <a href="#">Linked</a></h1>
<p class="tera">Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit.</a></p>
<h1 class="zetta">Zetta Size <a href="#">Linked</a></h1>
<p class="giga">Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit.</a></p>
<hr>
<h2>Lists</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ol>
<dl>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
<dt><a href="#">Lorem Ipsum</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
</dl>
<hr>
<h2>Blockquotes</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<footer>—<cite>The Person</cite></footer>
</blockquote>
<hr>
<h2>Text Level</h2>
<p><strong>Lorem</strong> ipsum <em>dolor</em> sit amet<sub>2</sub>, consectetuer<sup>2</sup> adipiscing <a href="#">elit</a>. Aenean <a href="#">commodo ligula eget</a> dolor. <i>Aenean massa.</i> Cum <b>sociis</b> natoque <ins>penatibus</ins> et <del>magnis</del> dis <s>parturient</s> montes, <time datetime="2014-01-01">nascetur</time> ridiculus <abbr title="Hypertext Markup Language">HTML</abbr>. Donec <q>“quam”</q> felis, <mark>ultricies</mark> nec, <data>pellentesque</data> eu, <dfn>pretium quis</dfn>, sem.</p>
<hr>
<h2>Smaller Text</h2>
<p><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</small></p>
<p class="milli">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p class="micro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<hr>
<h2>Tables</h2>
<table>
<caption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</caption>
<thead>
<tr>
<th></th>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<th>Sit</th>
<td>1 × 1</td>
<td>2 × 1</td>
<td>3 × 1</td>
</tr>
<tr>
<th>Amet</th>
<td>1 × 2</td>
<td>2 × 2</td>
<td>3 × 2</td>
</tr>
<tr>
<th>Elit</th>
<td>1 × 3</td>
<td>2 × 3</td>
<td>3 × 3</td>
</tr>
<tr>
<th>Eget</th>
<td>1 × 4</td>
<td>2 × 4</td>
<td>3 × 4</td>
</tr>
</tbody>
</body>
</html>
You can’t perform that action at this time.