Category Tags
Provides styles for category tags accross browsers.
Overview
Tags are styled using the .tag class. It supports both <a> and
<button> elements.
Filter
Tags can also be used to style filters. Filters share most of the tag styles
using the .tag class but also add a close x and can be
dismissed when clicked. Filters should add the data-dismiss="tag" attribute
to get styles and dismiss behavior. It can also be styled using the
.tag--close class but it will not have the dismiss behavior.
<button class="tag tag--close" data-dismiss="tag">Early Childhood</button>
<button class="tag tag--close" data-dismiss="tag">Latino</button>
<a href="" class="tag tag--close" data-dismiss="tag">Learning with Technology</a>
<a href="" class="tag tag--close" data-dismiss="tag">Reading</a>
Stacked
The tags are styled with some spacing around them to allow inline and stacked tags when grouping together.
<button class="tag">Early Childhood</button>
<button class="tag">Latino</button>
<a href="" class="tag">Learning with Technology</a>
<a href="" class="tag">Reading</a>
<button class="tag">Spanish Resources</button>
<button class="tag">Reading</button>
<a href="" class="tag">Latino</a>
<a href="" class="tag">Spanish Resources</a>
Download
Get a bundle with all tag styles.
Download<p>Get a bundle with all tag styles.</p>
<a href="/styles/atoms/tag.css" download="cs-tag.css" target="_blank" class="btn btn--primary">Download</a>