Badges

Badges are simple components that you can use to represent the status of an item.


Examples

Badges serve many purposes: they can indicate new notifications, show how many emails you have, etc. Here's a few examples:

I'm a badge! I'm a blue badge! 5

Adding badges

Badges are made with <span> tags, so adapt the text item's font size. For example:

Header 1 Badge

Header 2 Badge

Header 3 Badge

Paragraph Badge

Badge outside of text Badge with gradient
<h1>Header 1 <span class="badge dark">Badge</span></h1>
<h2>Header 2 <span class="badge red">Badge</span></h2>
<h3>Header 3 <span class="badge green">Badge</span></h3>
<p>Paragraph <span class="badge blue">Badge</span></p>
<span class="badge yellow">Badge outside of text</span>
<span class="badge gradient-blue">Badge with gradient</span>

Generally, to add a badge, use <span class="badge XXX">, where XXX is any Magic colour, including gradients.

Rounded badges

Warning: This feature is not functional yet. DO NOT use it in a production environment.

When bades contain only a single number or letter, you can make them circular:

5

<span class="badge red round">5</span>

These work exactly the same as regular badges, so can be attached to any text item and have any Magic colour.

Icon badges

Your Magic badges can also have FontAwesome icons:

50 new messages 22 new questions
<span class="badge dark"><i class="fas fa-question-circle"></i> 22 new questions</span>