Skip to main content
Version: 1.3.x

Badge

Since v1.0.0
View source

Badges can be use to display small informations beside other content.

counter change the background change the background + color
<span class="c-badge">counter</span>
<span class="c-badge u-bg-warning">change the background</span>
<span class="c-badge u-bg-danger u-c-white">change the background + color</span>

Pill version​

If you want to have pill shape, you just need to change the $c-badge-border-radius variable and pass a value superior to the expected height of the component (3rem must be enough, till the actual size is 1vr / 1.5rem).

counter change the background change the background + color
@forward "@glsass/components/components.badge" with (
  $c-badge-border-radius: 3rem
);