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.2
<span class="c-badge">v3.2.2</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>