Badge en Sign

Met de badge-, badge-pill- en sign classes van dit framework kunt u berichten, indicaties of getallen binnen componenten weergeven.

Badge

Header h1

<h1>Header <span class="badge">h1</span></h1>
<button class="button">Button <span class="badge">20</span></button>

Badge Pill

Header h1

<h1>Header <span class="badge-pill">h1</span></h1>
<button class="button">Button <span class="badge-pill">20</span></button>

Sign

Status: Ready

<p>Status: <span class="sign">Ready</span></p>

London Zoo

<p class="txt-size-xxl"><span class="sign">London Zoo</span></p>

Badge Kleuren

Wit

Header H1

<h1>Header <span class="badge color-white">h1</span></h1>
Zwart

Header H1

<h1>Header <span class="badge color-black">h1</span></h1>
Grijs

Header H1

<h1>Header <span class="badge color-gray">h1</span></h1>
Blauw

Header H1

<h1>Header <span class="badge color-blue">h1</span></h1>
Rood

Header H1

<h1>Header <span class="badge color-red">h1</span></h1>
Oranje

Header H1

<h1>Header <span class="badge color-orange">h1</span></h1>
Groen

Header H1

<h1>Header <span class="badge color-green">h1</span></h1>
Lime

Header H1

<h1>Header <span class="badge color-lime">h1</span></h1>
Geel

Header H1

<h1>Header <span class="badge color-yellow">h1</span></h1>
Bruin

Header H1

<h1>Header <span class="badge color-brown">h1</span></h1>
Paars

Header H1

<h1>Header <span class="badge color-purple">h1</span></h1>
Roze

Header H1

<h1>Header <span class="badge color-pink">h1</span></h1>

Badge-pill Kleuren

Wit

Header H1

<h1>Header <span class="badge-pill color-white">h1</span></h1>
Zwart

Header H1

<h1>Header <span class="badge-pill color-black">h1</span></h1>
Grijs

Header H1

<h1>Header <span class="badge-pill color-gray">h1</span></h1>
Blauw

Header H1

<h1>Header <span class="badge-pill color-blue">h1</span></h1>
Rood

Header H1

<h1>Header <span class="badge-pill color-red">h1</span></h1>
Oranje

Header H1

<h1>Header <span class="badge-pill color-orange">h1</span></h1>
Groen

Header H1

<h1>Header <span class="badge-pill color-green">h1</span></h1>
Lime

Header H1

<h1>Header <span class="badge-pill color-lime">h1</span></h1>
Geel

Header H1

<h1>Header <span class="badge-pill color-yellow">h1</span></h1>
Bruin

Header H1

<h1>Header <span class="badge-pill color-brown">h1</span></h1>
Paars

Header H1

<h1>Header <span class="badge-pill color-purple">h1</span></h1>
Roze

Header H1

<h1>Header <span class="badge-pill color-pink">h1</span></h1>

Sign Kleuren

Wit

Statis Ready

<h1>Statis <span class="sign color-white">h1</span></h1>
Zwart

Statis Ready

<h1>Statis <span class="sign color-black">h1</span></h1>
Grijs

Statis Ready

<h1>Statis <span class="sign color-gray">h1</span></h1>
Blauw

Statis Ready

<h1>Statis <span class="sign color-blue">h1</span></h1>
Rood

Statis Ready

<h1>Statis <span class="sign color-red">h1</span></h1>
Oranje

Statis Ready

<h1>Statis <span class="sign color-orange">h1</span></h1>
Groen

Statis Ready

<h1>Statis <span class="sign color-green">h1</span></h1>
Lime

Statis Ready

<h1>Statis <span class="sign color-lime">h1</span></h1>
Geel

Statis Ready

<h1>Statis <span class="sign color-yellow">h1</span></h1>
Bruin

Statis Ready

<h1>Statis <span class="sign color-brown">h1</span></h1>
Paars

Statis Ready

<h1>Statis <span class="sign color-purple">h1</span></h1>
Roze

Statis Ready

<h1>Statis <span class="sign color-pink">h1</span></h1>