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
<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>