Badges can be used to display small pieces of information.
The badge component is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding @include badge(); into your SCSS dependencies file.
.c-badge<span class="c-badge">Default</span>
.c-badge c-badge--rounded<span class="c-badge c-badge--rounded">Rounded</span>
.c-badge c-badge--angled<span class="c-badge c-badge--angled">Angled</span>
.c-badge c-badge--large<span class="c-badge c-badge--large">Large</span>
.c-badge c-badge--transparent<span class="c-badge c-badge--transparent">Transparent <span></span> badge</span>
.c-badge c-badge--light<span class="c-badge c-badge--light">Light <span></span> badge</span>
.c-badge c-badge--light c-badge--noPad<span class="c-badge c-badge--light c-badge--noPad">Light <span></span> badge</span>
.c-badge c-badge--info<span class="c-badge c-badge--info">Info</span>
.c-badge c-badge--success<span class="c-badge c-badge--success">Success</span>
.c-badge c-badge--warning<span class="c-badge c-badge--warning">Warning</span>
.c-badge c-badge--alert<span class="c-badge c-badge--alert">Alert</span>
.c-badge c-badge--important<span class="c-badge c-badge--important">Important</span>
.c-badge c-badge--award<span class="c-badge c-badge--award">Award</span>
<span class="c-badge c-badge--rounded">Default</span>
<span class="c-badge c-badge--rounded c-badge--light">Light</span>
<span class="c-badge c-badge--rounded c-badge--info">Info</span>
<span class="c-badge c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--rounded c-badge--warning">Warning</span>
<span class="c-badge c-badge--rounded c-badge--alert">Alert</span>
<span class="c-badge c-badge--rounded c-badge--important">Important</span>
<span class="c-badge c-badge--rounded c-badge--award">Award</span>
<span class="c-badge c-badge--angled">Default</span>
<span class="c-badge c-badge--angled c-badge--light">Light</span>
<span class="c-badge c-badge--angled c-badge--info">Info</span>
<span class="c-badge c-badge--angled c-badge--success">Success</span>
<span class="c-badge c-badge--angled c-badge--warning">Warning</span>
<span class="c-badge c-badge--angled c-badge--alert">Alert</span>
<span class="c-badge c-badge--angled c-badge--important">Important</span>
<span class="c-badge c-badge--angled c-badge--award">Award</span>
<span class="c-badge c-badge--large">Default</span>
<span class="c-badge c-badge--large c-badge--light">Light</span>
<span class="c-badge c-badge--large c-badge--info">Info</span>
<span class="c-badge c-badge--large c-badge--success">Success</span>
<span class="c-badge c-badge--large c-badge--warning">Warning</span>
<span class="c-badge c-badge--large c-badge--alert">Alert</span>
<span class="c-badge c-badge--large c-badge--important">Important</span>
<span class="c-badge c-badge--large c-badge--award">Award</span>
<span class="c-badge c-badge--large c-badge--rounded">Default</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--light">Light</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--info">Info</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--warning">Warning</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--alert">Alert</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--important">Important</span>
<span class="c-badge c-badge--large c-badge--rounded c-badge--award">Award</span>
<span class="c-badge c-badge--large c-badge--angled">Default</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--light">Light</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--info">Info</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--success">Success</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--warning">Warning</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--alert">Alert</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--important">Important</span>
<span class="c-badge c-badge--large c-badge--angled c-badge--award">Award</span>