---
layout: default
title: Ghost UI · Making publishing beautiful.
---

<header class="page-header">
    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
    <h2>Home</h2>
</header>

<section class="page-content">

    <h3>Labels In Headers</h3>

    <h1>Heading 1 <span class="label label-default">New</span></h1>
    <h2>Heading 2 <span class="label label-default">New</span></h2>
    <h3>Heading 3 <span class="label label-default">New</span></h3>
    <h4>Heading 4 <span class="label label-default">New</span></h4>
    <h5>Heading 5 <span class="label label-default">New</span></h5>
    <h6>Heading 6 <span class="label label-default">New</span></h6>

    <hr>
    <h3>Span Labels</h3>

    <span class="label label-default">Default</span>
    <span class="label label-alt">Alt</span>
    <span class="label label-blue">Blue</span>
    <span class="label label-green">Green</span>
    <span class="label label-red">Red</span>

    <hr>
    <h3>Links as Labels</h3>

    <a href="#" class="label label-default">Default</a>
    <a href="#" class="label label-alt">Alt</a>
    <a href="#" class="label label-blue">Blue</a>
    <a href="#" class="label label-green">Green</a>
    <a href="#" class="label label-red">Red</a>

    <hr>
    <h3>Labels in a Paragraph</h3>
    <p>Lorem ipsum dolor sit amet, consectetur <span class="label label-red">Lorem</span> adipisicing elit. Voluptate provident ad perferendis fugiat saepe consequuntur, aspernatur quod eveniet accusantium excepturi, ut omnis. Fugiat excepturi, quae, nemo aut maxime commodi, ullam distinctio porro, culpa quisquam optio. Consectetur voluptatem culpa cupiditate numquam nihil aut, blanditiis dignissimos. Repellat iure odit dicta dignissimos, ex rerum, alias fugit, molestiae eaque quibusdam sint dolor quisquam nesciunt illum!</p>

</section>