Badges

By Ken Hawkins

feed news labels built-in Requires EBI Visual Framework 1.1.0, 1.2.0

The badge is one of the most common atoms in the ecosystem and has several variants.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<h3>Basic badge</h3>
<a class="button" href="#">Sample</a>

<h4>Basic badge - tiny</h4>
<a class="button tiny" href="#">Sample</a>

<h4>Label badge</h4>
<p>While sharing a very similar look to the basic badge, this label has less padding and is meant to attract less attention. Great for tags.</p>
<a class="label" href="#">Sample</a>

<h3>Icon badge</h3>
<a class="button" href="#"><i class="icon icon-generic" data-icon="P"></i> Sample</a>
<a class="button" href="#">Sample to the right <i class="icon icon-generic" data-icon="P"></i></a>

<h3>Tile badge</h3>
<p>Square or rectangle, these badges command more visual attention.</p>
<a class="button" href="#"><h3 class="icon icon-generic white-color" data-icon="P"></h3> Sample</a>

<h3>Readmore badge</h3>
<p>Typically we recommend you construct more complex atoms out of other atoms, but recognising that "read more" buttons are common you can add the arrow with <code>.readmore</code>.</p>
<a class="button readmore" href="#">The full article</a>



JS