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.

v0.1.0

<Badges>v0.1.0</Badges>

Colours

Badges come as default, primary, secondary, success and error

To use, add the colour modifier class:

Default Primary Secondary Success Error

<Badges>Default</Badges>
<Badges primary>Primary</Badges>
<Badges secondary>Secondary</Badges>
<Badges success>Success</Badges>
<Badges error>Error</Badges>

Rounded

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

Default Primary Secondary Success Error

<Badges>Default</Badges>
<Badges primary rounded>Primary</Badges>
<Badges secondary rounded>Secondary</Badges>
<Badges success rounded>Success</Badges>
<Badges error rounded>Error</Badges>