Badges

They're useful when you want to add additional info. Like a version number of a project or for status messages for individual items.

v3.2.0
<span class="c-badge">v3.2.0</span>

colors

Badges come as default, brand, info, warning, success and error

To use, add the color modifier class:

Default Brand Info Warning Success Error
<span class="c-badge">Default</span>
<span class="c-badge c-badge--brand">Brand</span>
<span class="c-badge c-badge--info">Info</span>
<span class="c-badge c-badge--warning">Warning</span>
<span class="c-badge c-badge--success">Success</span>
<span class="c-badge c-badge--error">Error</span>

Rounded

Make your badges rounded with the .c-badge--rounded modifier.

Default Brand Info Warning Success Error
<span class="c-badge">Default</span>
<span class="c-badge c-badge--rounded c-badge--brand">Brand</span>
<span class="c-badge c-badge--rounded c-badge--info">Info</span>
<span class="c-badge c-badge--rounded c-badge--warning">Warning</span>
<span class="c-badge c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--rounded c-badge--error">Error</span>

Ghost

Remove your badges bodies with the .c-badge--ghost modifier.

Default Brand Info Warning Success Error
<span class="c-badge">Default</span>
<span class="c-badge c-badge--ghost c-badge--rounded c-badge--brand">Brand</span>
<span class="c-badge c-badge--ghost c-badge--rounded c-badge--info">Info</span>
<span class="c-badge c-badge--ghost c-badge--rounded c-badge--warning">Warning</span>
<span class="c-badge c-badge--ghost c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--ghost c-badge--rounded c-badge--error">Error</span>