Typographic Styles

Headings

Heading 1

                        <h1 class="h1">Heading 1</h1>

Heading 2

                        <h2 class="h2">Heading 2</h2>

Heading 3

                        <h3 class="h3">Heading 3</h3>

Heading 4

                        <h4 class="h4">Heading 4</h4>
Heading 5
                        <h5 class="h5">Heading 5</h5>
Heading 6
                        <h6 class="h6">Heading 5</h6>

Paragraph default

Cras placerat pharetra nibh et volutpat. Suspendisse potenti. Duis quis ornare odio. Aenean fringilla mattis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et dui nec libero rhoncus sollicitudin. Nulla convallis volutpat lectus.

                        <p>Cras placerat pharetra nibh et volutpat. Suspendisse potenti. Duis quis ornare odio. Aenean fringilla mattis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et dui nec libero rhoncus sollicitudin. Nulla convallis volutpat lectus.</p>

Paragraph Intro

Aenean ac dui purus. Proin non porttitor augue. Mauris tristique massa eget laoreet imperdiet. Vestibulum pulvinar et turpis sit amet mollis. Morbi vitae sodales massa, non elementum lacus.

                        <p class="intro">Aenean ac dui purus. Proin non porttitor augue. Mauris tristique massa eget laoreet imperdiet. Vestibulum pulvinar et turpis sit amet mollis. Morbi vitae sodales massa, non elementum lacus.</p>

Inline Styles

<strong> This line rendered as bold text.

                        <strong>This line rendered as bold text.</strong>

<b> This line rendered as bold text.

                        <b>This line rendered as bold text.</b>

<em> This line rendered as italicized text.

                        <em>This line rendered as italicized text.</em>

<i> This line rendered as italicized text.

                        <i>This line rendered as italicized text.</i>

<mark> You can use the mark tag to highlight text.

                        <p>You can use the mark tag to <mark class="mark">highlight</mark> text.</p>

<del> This line of text is meant to be treated as deleted text.

                        <del>This line of text is meant to be treated as deleted text.</del>

<s> This line of text is meant to be treated as no longer accurate.

                        <s>This line of text is meant to be treated as deleted text.</s>

<ins> This line of text is meant to be treated as an addition to the document.

                        <ins>This line of text is meant to be treated as deleted text.</ins>

<u> This line of text will render as underlined

                        <u>This line of text will render as underlined.</u>

<small> This line of text is meant to be treated as fine print.

                        <small>This line of text is meant to be treated as fine print.</small>

<abbr> WHO

                        <abbr title="World Health Organization">WHO</abbr>

Inline Link

Flexitarian franzen seitan, health goth venmo williamsburg gluten-free pug artisan truffaut whatever small batch crucifix gochujang. Flexitarian irony craft beer cloud bread.

                        <a href="#LINK" class="link">health goth venmo williamsburg</a>

CTA Link

Learn More 
                        <a href="#LINK" class="link--cta">health goth venmo williamsburg</a>
Learn More 
                        <a href="#LINK" class="link--cta link--cta--simple">health goth venmo williamsburg</a>

Blockquote

Pellentesque aliquet, nisl non varius dapibus.
                        <blockquote class="blockquote">Pellentesque aliquet, nisl non varius dapibus.</blockquote>

Text Align

Left Alignment

                        <p class="text--left">Left Alignment</p>

Center Alignment

                        <p class="text--center">Center Alignment</p>

Right Alignment

                        <p class="text--right">Right Alignment</p>

Text Colors

Alpha

                        <p class="text--alpha">Alpha</p>

Bravo

                        <p class="text--bravo">Bravo</p>

Light

                        <p class="text--light">light</p>

Cropped Line height top

Heading 2

                        <h1 class="h2 crop-line-height">Heading 2</h1>

Divider

                        <hr class="hr">

Divider Secondary

                        <hr class="hr hr--secondary">

Unordered Lists

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Consectetur adipiscing elit
                        <ul class="list">
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Nulla volutpat aliquam velit
                                <ul>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                </ul>
                            </li>
                            <li>Consectetur adipiscing elit</li>
                        </ul>

Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
  3. Consectetur adipiscing elit
                        <ol class="list">
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Nulla volutpat aliquam velit
                                <ol>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                </ol>
                            </li>
                            <li>Consectetur adipiscing elit</li>
                        </ol>