mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions
picocss/docs/src/typography.html
Lucas Larroche dbc59ca696 docs: Disclaimer about links and buttons classes
2022-03-13 15:31:11 +07:00

211 lines
8.2 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<h1>Typography</h1>
<h2>
All typographic elements are responsive, allowing text to scale
gracefully across devices and viewports.
</h2>
</hgroup>
<figure>
<table role="grid">
<thead>
<tr>
<th>Device</th>
<th>Extra&nbsp;small</th>
<th>Small</th>
<th>Medium</th>
<th>Large</th>
<th>Extra&nbsp;large</th>
</tr>
</thead>
<tbody>
<tr>
<th>Base&nbsp;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>&lt;<b>h1</b>&gt;</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>&lt;<b>h2</b>&gt;</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>&lt;<b>h3</b>&gt;</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>&lt;<b>h4</b>&gt;</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>&lt;<b>h5</b>&gt;</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>&lt;<b>h6</b>&gt;</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>&lt;<b>small</b>&gt;</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>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer>
</article>
<p>
Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
<code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
<code><i>margin-bottom</i></code> are collapsed and the
<code>:last-child</code> is muted.
</p>
<article aria-label="Hgroup example">
<div class="headings">
<h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3>
</div>
<footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</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>
<p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</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>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</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>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink