Typography

There are no notes for this item.

<div class="row">
    <div class="columns">
        <h1>This is a h1 heading</h1>
        <h2>This is a h2 heading</h2>
        <h3>This is a h3 heading</h3>
        <h4>This is a h4 heading</h4>
        <h5>This is a h5 heading</h5>
        <h5>This is a h6 heading</h5>
    </div>
</div>

<div class="row block-heading">
    <div class="columns text-center">
        <h1><b>This is a block heading.</b> Use the bold tag to add emphasis.</h1>
    </div>
</div>

<div class="row block-heading">
    <div class="columns text-center">
        <h1>This is a block heading. <small>Use small tags to create a subtitle.</small></h1>
    </div>
</div>

<div class="row block-heading">
    <div class="columns text-center">
        <hr class="inline-hr">
        <h2 class="has-hr"><span>This is a heading with a horizontal rule</span></h2>
    </div>
</div>

<div class="row">
    <div class="columns small-12">
        <p class="lead">This is a lead paragraph. Fusce libero eros, fringilla vitae turpis non, pellentesque laoreet sem. Duis lectus nulla, ultrices in maximus vel, pharetra ac tortor. Nunc sed diam nisl. Praesent sed tincidunt nunc. Vivamus mi massa, mollis vel arcu
            vel, finibus feugiat augue. Cras condimentum lobortis dui, quis ultrices diam fringilla nec. Phasellus condimentum eu augue tristique tristique. Vestibulum ac elit nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat sed neque et posuere. Proin cursus lectus in mi viverra lacinia. Donec ac pulvinar nisi. Donec non lacus consectetur, maximus mi convallis, semper ante. Morbi ut turpis
            neque. Duis id elit eu ipsum fringilla mollis. <a href="#">This is a hyperlink</a>. Vivamus vehicula sem luctus, finibus urna id, gravida lorem.</p>
        <p class="smallprint">This is some fine print. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tincidunt ipsum.</p>
    </div>
</div>

<div class="row">
    <div class="columns small-12 medium-6">
        <ul>
            <li>This is an unordered list</li>
            <li>Nam bibendum augue vitae dictum tempor</li>
            <li>Donec nec leo bibendum, facilisis dui sit amet, rhoncus libero</li>
            <li>Phasellus et metus in magna blandit ullamcorper</li>
        </ul>
    </div>
    <div class="columns small-12 medium-6">
        <ol>
            <li>This is an ordered list</li>
            <li>Quisque a sem in odio vulputate efficitur vitae vitae orci</li>
            <li>Morbi nec libero consectetur, consequat magna id, aliquet metus</li>
            <li>Nunc sit amet lorem ac odio laoreet varius</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="columns small-12">
        <blockquote>
            <p>Integer a ullamcorper est. Vivamus scelerisque semper dui non pharetra. Proin cursus lacus ac augue fermentum, vitae tristique sem dapibus. In dictum.</p>
            <footer>
                <cite>My Name, My Company</cite>
            </footer>
        </blockquote>
    </div>
</div>
/* No context defined for this component. */