index.html

<div class="demo-container">

    <h1 class="page-title">
        Page Title (Sky Text Regular <span class="demo-pink">52px</span> <small class="demo-mobile-size">32px*</small> )
        <br/><span class="inactive">Line-height 56px  <small class="demo-mobile-size">36px*</small></span>
    </h1>

    <h2 class="section-title">Section Title (Sky Text Regular <span class="demo-pink">44px</span> <small class="demo-mobile-size">28px*</small>)
        <br/><span class="inactive">Line-height 48px  <small class="demo-mobile-size">32px*</small></span>
    </h2>
    <h2 class="section-title smaller">Smaller Section Title (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">36px</span> <small class="demo-mobile-size">28px*</small>)
        <br/><span class="inactive">Line-height 40px <small class="demo-mobile-size">32px*</small></span>
    </h2>

    <h3 class="pod-title">Pod Title (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">32px</span> <small class="demo-mobile-size">28px*</small>)
        <br/><span class="inactive">Line-height 36px <small class="demo-mobile-size">32px*</small></span>
    </h3>
    <h3 class="pod-title smaller">Smaller Pod Title (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">28px</span> <small class="demo-mobile-size">24px*</small>)
        <br/><span class="inactive">Line-height 32px <small class="demo-mobile-size">28px*</small></span>
    </h3>

    <p class="intro">Intro Copy (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">24px</span> <small class="demo-mobile-size">20px*</small>)
        <br/><span class="inactive">Line-height 28px <small class="demo-mobile-size">24px*</small></span>
    </p>

    <p class="intro smaller">Smaller Intro Copy (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">20px</span>)
        <br/><span class="inactive">Line-height 24px</span>
    </p>

    <p>Body text (<span class="medium">Sky Text Medium</span> / Regular <span class="demo-pink">16px</span>)
        <br/><span class="inactive">Line-height 20px</span>
    </p>

    <p class="text--instructions">Instructional copy (Luna <span class="demo-pink">24px</span>)
        <br/><span class="inactive">Line-height 40px</span>
    </p>

    <small class="demo-block text--legal">Legal copy</small>

    <p class="text--error">Error</p>
    <p class="text--secondary">Secondary</p>
    <p class="text--inactive">Inactive</p>

    <strong>'Strong' tags go to medium automatically</strong>
    <small class="demo-block">'Small' text (relative to container)</small>

    <p>
        <a class="link--internal" href="#">Link to a different location (same page)</a>
    </p>
    <p >
        <a href="#" ><i class="skycon skycon--chevron"></i>Link to a different page (with a chevron)</a>
    </p>

    <div class="demo-smash-img text--white">
        <p >Text on dark background is white</p>
        <a href="#" ><i class="skycon-chevron"></i>Links next to normal text need chevrons</a>
    </div>

    <div class="demo-beckham-img text--black">
        <p >Text on light background is black</p>
        <a href="#" ><i class="skycon-chevron"></i>Links next to normal text need chevrons</a>
    </div>


    <ul class="list list--grey">
        <li>List with grey bullet points</li>
        <li>List with grey bullet points</li>
        <li>List with grey bullet points</li>
    </ul>

    <ol class="list">
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
    </ol>

</div>