This framework's badge, badge-pill and sign class allow you to display messages, indications or numbers within components.
badge
<h1>Header <span class="badge">h1</span></h1>
<button class="button button-blue">Button <span class="badge color-orange">20</span></button>
badge-pill
<h1 class="text-red">Header <span class="badge-pill color-blue">h1</span></h1>
<button class="button button-purple">Button <span class="badge-pill color-yellow">20</span></button>
Status: Ready
sign
<p>Status: <span class="sign">Ready</span></p>
Status: Open
<p>Status: <span class="sign color-blue">Open</span></p>
London Zoo
<p class="text-xxl">Status: <span class="sign color-red">London Zoo</span></p>
sign sign-padding
<div class="sign sign-padding color-green"> <div class="sign color-green border border-white"> Falcon Ridge Parkway </div> </div>