---
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>Badges</h3>

    <div style="padding: 1rem; background: #333; overflow: hidden;">
        <a class="nav-item content active" href="#">
            <div class="nav-label"><i class="icon-content"></i> Content <span class="badge">42</span></div>
        </a>
        <a class="nav-item new-post" href="#">
            <div class="nav-label"><i class="icon-add"></i> New Post <span class="badge badge-blue">4</span></div>
        </a>
        <a class="nav-item settings" href="#">
            <div class="nav-label"><i class="icon-settings2"></i> Settings <span class="badge badge-red">1</span></div>
        </a>
        <a class="nav-item new-post" href="#">
            <div class="nav-label"><i class="icon-question"></i> Lorem <span class="badge badge-green">2</span></div>
        </a>
    </div>

    <hr>
    <h3>Badges in Buttons</h3>

    <button type="button" class="btn btn-blue">Blue <span class="badge">42</span></button>
    <a href="#" type="button" class="btn btn-red">Red</a>
    <a href="#" type="button" class="btn btn-green">Green <span class="badge">5</span></a>

    <hr>
    <h3>Badges in Text</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam delectus deserunt <span class="badge">5</span> qui atque expedita aliquam error, repellat libero sint eveniet dolor, reiciendis ab quod iure accusamus. Quo assumenda <span class="badge badge-green">3</span> sunt quam nulla harum deserunt ducimus iusto dolorum praesentium laudantium aspernatur illum recusandae aliquid eligendi delectus, veritatis labore, nostrum, excepturi voluptatibus totam?</p>


</section>