#Tags

A handy component to display snippets of information throughout the site.

#Basic

Tags come with basic minimal styling by default.

Look
At
Me!
<div class="tag-container u-center">
    <div class="tag">Look</div>
    <div class="tag">At</div>
    <div class="tag">Me!</div>
</div>

#Colors

Color your tags up just like your buttons with 8 different styles. Of course, you can always use the new modifier classes such as bg-indigo-200 instead.

White
Dark
Primary
Info
Success
Warning
Danger
<div class="tag tag--white">White</div>
<div class="tag tag--black">Dark</div>
<div class="tag tag--primary">Primary</div>
<div class="tag tag--link">Link</div>
<div class="tag tag--info">Info</div>
<div class="tag tag--success">Success</div>
<div class="tag tag--warning">Warning</div>
<div class="tag tag--danger">Danger</div>

#Sizes

Tags also come two sizes larger with the tag--large and tag--xlarge modifiers. Tags can also be more rounded with the tag--rounded class.

Normal
Extra Large
<div class="col-6">
    <div class="tag tag--info">Normal</div>
    <div class="tag tag--link tag--large">Large</div>
    <div class="tag tag--danger tag--xlarge">Extra Large</div>
</div>

#Buttons

Tags can be styled to look like different buttons.

Tag Close

This is a special tag that is designed to serve as a close button for the tag with the tag__close-btn class.

<div class="tag tag__close-btn"></div>
Tag Delete

This is embedded within the tag itself unlike the close button to the side. Create a new div inside the tag with the tag__delete class.

Close Me
<div class="tag tag--success">
    Close Me
    <div class="tag tag__delete"></div>
</div>

#Layouts

Tags also come with layout styles to control how tags are positioned relative to each other.

Tag Container

The tag-container is a container for different tags.

<div class="tag-container">
    <div class="tag tag--link">One</div>
    <div class="tag tag--link">Two</div>
    <div class="tag tag--link">Three</div>
    <div class="tag tag--link">Four</div>
    <div class="tag tag--link">Five</div>
</div>
Tag Container Grouped Tags

Normal

Group tags with extra buttons like the delete button.

Version
0.6.0
<div class="tag-container group-tags">
    <div class="tag tag--dark">Version</div>
    <div class="tag tag--info">0.6.0</div>
    <div class="tag tag--warning tag__close-btn"></div>
</div>

Rounded

Coming Soon
0.6.1

Group the tags with rounded borders.

Version
0.6.0
<div class="tag-container group-tags group-tags--rounded">
    <div class="tag tag--dark">Version</div>
    <div class="tag tag--info">0.6.0</div>
    <div class="tag tag--warning tag__close-btn"></div>
</div>