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! 5Badges are made with <span> tags, so adapt the text item's font size. For example:
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.
When bades contain only a single number or letter, you can make them circular:
<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.
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>