Code Club Style Guide

Badges

What are they for?

Badges are used to highlight a particular piece of meta data relating to a bigger object. Think of when you have unread notifications on a mobile app, when your device will mark the app's icon with a badge containing the number of unread notifications.

We also use badges to denote the state of a Code Club, to show that they either pending activation, or active. You may find other uses. They come in a variety of colors, but only one size.

Example

grey-dark

grey-med

grey-light

grey-x-light

grey-xx-light

green

blue

yellow

red

<p><span class="c-badge c-badge--grey-dark">grey-dark</span></p>
<p><span class="c-badge c-badge--grey-med">grey-med</span></p>
<p><span class="c-badge c-badge--grey-light">grey-light</span></p>
<p><span class="c-badge c-badge--grey-x-light">grey-x-light</span></p>
<p><span class="c-badge c-badge--grey-xx-light">grey-xx-light</span></p>
<p><span class="c-badge c-badge--green">green</span></p>
<p><span class="c-badge c-badge--blue">blue</span></p>
<p><span class="c-badge c-badge--yellow">yellow</span></p>
<p><span class="c-badge c-badge--red">red</span></p>