Typography

<h1>Heading 1</h1>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p>
    <h2>Heading 2</h2>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p>
    <h3>Heading 3</h3>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p> 
    <h4>Heading 4</h4>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p>
    <h5>Heading 5</h5>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p>
    <h6>Heading 6</h6>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”)</p>

    <header>
        <h1>Paragraphs</h1>
    </header>

    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax
        of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

    <p>0 1 2 3 4 5 6 7 8 9 ! @ &pound; $ % ^ &amp; * ( ) _ + = - ] [ &apos; ; / . , | &quot; : ? &gt; &lt;</p>

    <header>
        <h1>Blockquotes</h1>
    </header>

    <blockquote>
        <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
        <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
    </blockquote>
    <figcaption>
        Jakob Detering, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
    </figcaption>

    <header>
        <h1>Lists</h1>
    </header>

    <h3>Definition list</h3>
    <dl>
        <dt>Definition List Title</dt>
        <dd>This is a definition list division.</dd>
    </dl>

    <h3>Ordered List</h3>
    <ol>
        <li>List Item 1 It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ol>

    <h3>Unordered List</h3>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>

    <header>
        <h1>Details</h1>
    </header>

    <details>
        <summary><strong>Closed details</strong></summary>
        <p>The summary element can contain interface elements that don't need to be immediately visible.</p>
    </details>

    <details open>
        <summary><strong>Open details</strong></summary>
        <p>The open summary element reveals collapsible interface elements.</p>
    </details>

    <header>
        <h1>Horizontal rules</h1>
    </header>

    <hr>

    <header>
        <h1>Code</h1>
    </header>

    <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
    <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
    <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>

    <pre><code>
function exportPaths() {
    const map = {};
    for (let item of fractal.components.flatten()) {
        map[`@${item.handle}`] = path.relative(process.cwd(), item.displayPath);
    }
    fs.writeFileSync('components-map.json', JSON.stringify(map, null, 2), 'utf8');
}
    </code></pre>

    <header>
        <h1>Pre-formatted text</h1>
    </header>

    <pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>

    <header>
        <h1>Inline elements</h1>
    </header>

    <p><a href="#!">This is a text link</a>.</p>
    <p><strong>Strong is used to indicate strong importance.</strong></p>
    <p><em>This text has added emphasis.</em></p>
    <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
    <p>The <i>i element</i> is text that is offset from the normal text.</p>
    <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
    <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
    <p><s>This text has a strikethrough</s>.</p>
    <p>Superscript<sup>®</sup>.</p>
    <p>Subscript for things like H<sub>2</sub>O.</p>
    <p><small>This small text is small for for fine print, etc.</small></p>
    <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
    <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
    <p><cite>This is a citation.</cite></p>
    <p>The <dfn>dfn element</dfn> indicates a definition.</p>
    <p>The <mark>mark element</mark> indicates a highlight.</p>
    <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
    <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>