mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
199 lines
7.6 KiB
HTML
199 lines
7.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
${require('./_head.html')
|
||
|
|
title="Typography"
|
||
|
|
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
|
||
|
|
canonical="typography.html"
|
||
|
|
}
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
${require('./_nav.html')}
|
||
|
|
|
||
|
|
<main class="container" id="docs">
|
||
|
|
${require('./_sidebar.html') active="typography-link"}
|
||
|
|
|
||
|
|
<div role="document">
|
||
|
|
<section id="typography">
|
||
|
|
<hgroup>
|
||
|
|
<h2>Typography</h2>
|
||
|
|
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
|
||
|
|
</hgroup>
|
||
|
|
<figure>
|
||
|
|
<table role="grid">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Device</th>
|
||
|
|
<th>Extra small</th>
|
||
|
|
<th>Small</th>
|
||
|
|
<th>Medium</th>
|
||
|
|
<th>Large</th>
|
||
|
|
<th>Extra large</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>Base font</th>
|
||
|
|
<td>16<small>px</small></td>
|
||
|
|
<td>17<small>px</small></td>
|
||
|
|
<td>18<small>px</small></td>
|
||
|
|
<td>19<small>px</small></td>
|
||
|
|
<td>20<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h1</b>></code></th>
|
||
|
|
<td>32<small>px</small></td>
|
||
|
|
<td>34<small>px</small></td>
|
||
|
|
<td>36<small>px</small></td>
|
||
|
|
<td>38<small>px</small></td>
|
||
|
|
<td>40<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h2</b>></code></th>
|
||
|
|
<td>28<small>px</small></td>
|
||
|
|
<td>29<small>px</small></td>
|
||
|
|
<td>31<small>.5px</small></td>
|
||
|
|
<td>33<small>.25px</small></td>
|
||
|
|
<td>35<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h3</b>></code></th>
|
||
|
|
<td>24<small>px</small></td>
|
||
|
|
<td>25<small>.5px</small></td>
|
||
|
|
<td>27<small>px</small></td>
|
||
|
|
<td>28<small>.5px</small></td>
|
||
|
|
<td>30<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h4</b>></code></th>
|
||
|
|
<td>20<small>px</small></td>
|
||
|
|
<td>21<small>.25px</small></td>
|
||
|
|
<td>22<small>.5px</small></td>
|
||
|
|
<td>23<small>.75px</small></td>
|
||
|
|
<td>25<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h5</b>></code></th>
|
||
|
|
<td>18<small>px</small></td>
|
||
|
|
<td>19<small>.125px</small></td>
|
||
|
|
<td>20<small>.25px</small></td>
|
||
|
|
<td>21<small>.375px</small></td>
|
||
|
|
<td>22<small>.5px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>h6</b>></code></th>
|
||
|
|
<td>16<small>px</small></td>
|
||
|
|
<td>17<small>px</small></td>
|
||
|
|
<td>18<small>px</small></td>
|
||
|
|
<td>19<small>px</small></td>
|
||
|
|
<td>20<small>px</small></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><code><<b>small</b>></code></th>
|
||
|
|
<td>14<small>px</small></td>
|
||
|
|
<td>14<small>.875px</small></td>
|
||
|
|
<td>15<small>.75px</small></td>
|
||
|
|
<td>16<small>.625px</small></td>
|
||
|
|
<td>27<small>.5px</small></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</figure>
|
||
|
|
<p>Headings:</p>
|
||
|
|
<article aria-label="Headings examples">
|
||
|
|
<h1>Heading 1</h1>
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
<h4>Heading 4</h4>
|
||
|
|
<h5>Heading 5</h5>
|
||
|
|
<h6>Heading 6</h6>
|
||
|
|
<footer class="code">
|
||
|
|
|
||
|
|
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||
|
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||
|
|
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||
|
|
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||
|
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||
|
|
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||
|
|
<article aria-label="Hgroup example">
|
||
|
|
<hgroup>
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
<h3>Subtitle for heading 2</h3>
|
||
|
|
</hgroup>
|
||
|
|
<footer class="code">
|
||
|
|
|
||
|
|
<pre><code><<b>hgroup</b>>
|
||
|
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||
|
|
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||
|
|
<<b>hgroup</b>></code></pre>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
<p>Inline text elements:</p>
|
||
|
|
<article aria-label="Inline text examples">
|
||
|
|
<div class="grid">
|
||
|
|
<div>
|
||
|
|
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
|
||
|
|
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
|
||
|
|
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
|
||
|
|
<p><del>Deleted</del> <code>del</code></p>
|
||
|
|
<p><ins>Inserted</ins> <code>ins</code></p>
|
||
|
|
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p><mark>Highlighted</mark> <code>mark</code></p>
|
||
|
|
<p><s>Strikethrough</s> <code>s</code></p>
|
||
|
|
<p><small>Small </small> <code>small</code></p>
|
||
|
|
<p>Text <sub>Sub</sub> <code>sub</code></p>
|
||
|
|
<p>Text <sup>Sup</sup> <code>sup</code></p>
|
||
|
|
<p><u>Underline</u> <code>u</code></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||
|
|
<article aria-label="Links examples">
|
||
|
|
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||
|
|
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||
|
|
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
|
||
|
|
<footer class="code">
|
||
|
|
|
||
|
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||
|
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||
|
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
<p>Blockquote:</p>
|
||
|
|
<article aria-label="Blockquote example">
|
||
|
|
<blockquote>
|
||
|
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||
|
|
<footer>
|
||
|
|
<cite>- Phasellus eget lacinia</cite>
|
||
|
|
</footer>
|
||
|
|
</blockquote>
|
||
|
|
<footer class="code">
|
||
|
|
|
||
|
|
<pre><code><<b>blockquote</b>>
|
||
|
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||
|
|
<<b>footer</b>>
|
||
|
|
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||
|
|
</<b>footer</b>>
|
||
|
|
</<b>blockquote</b>></code></pre>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
${require('./_footer.html')}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<script src="js/commons.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|