#Tags

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

#Basic

Tags come with basic minimal styling by default.

Look

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

Link

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

Updated

0.6.3

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.

To maintain backwards compatability with the old sizes before 0.6.3, the default size will be the same as tag--sm.

Extra Small

Small

Medium

Large

Extra Large

<div class="py-2 u-text-center">
    <div class="tag tag--xs bg-orange-100">Extra Small</div>
    <div class="tag tag--sm bg-orange-200">Small</div>
    <div class="tag tag--md bg-orange-300">Medium</div>
    <div class="tag tag--lg bg-orange-400">Large</div>
    <div class="tag tag--xl bg-orange-500">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.

One

Two

Three

Four

Five

<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

Updated

0.6.3

Normal

Group tags with extra buttons like the delete button.

0.6.0

<div class="tag-container group-tags">
    <div class="tag tag--xs tag--dark">xs</div>
    <div class="tag tag--xs tag--info">0.6.0</div>
    <div class="tag tag--xs tag--warning tag__close-btn"></div>
</div>
<div class="tag-container group-tags">
    <div class="tag tag--sm tag--dark">sm</div>
    <div class="tag tag--sm tag--info">0.6.0</div>
    <div class="tag tag--sm tag--warning tag__close-btn"></div>
</div>
<div class="tag-container group-tags">
    <div class="tag tag--md tag--dark">md</div>
    <div class="tag tag--md tag--info">0.6.0</div>
    <div class="tag tag--md tag--warning tag__close-btn"></div>
</div>
<div class="tag-container group-tags">
    <div class="tag tag--lg tag--dark">lg</div>
    <div class="tag tag--lg tag--info">0.6.0</div>
    <div class="tag tag--lg tag--warning tag__close-btn"></div>
</div>
<div class="tag-container group-tags">
    <div class="tag tag--xl tag--dark">xl</div>
    <div class="tag tag--xl tag--info">0.6.0</div>
    <div class="tag tag--xl tag--warning tag__close-btn"></div>
</div>

Rounded

Group the tags with rounded borders.

Version