Let's have fun

Let's have fun

Badge and Sign

Info

This framework's badge, badge-pill and sign class allow you to display messages, indications or numbers within components.

The badge

Header h1

badge
<h1>Header <span class="badge">h1</span></h1>

<button class="button button-blue">Button <span class="badge color-orange">20</span></button>

The badge-pill

Header h1

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>

The sign

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>
Falcon Ridge Parkway
sign sign-padding
<div class="sign sign-padding color-green">
  <div class="sign color-green border border-white">
    Falcon Ridge Parkway
  </div>
</div>