--- 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>