<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-serif is-1 has-text-weight-bold">Tag</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Tags</span> are used for items that need to be labeled, categorized, or organized using keywords that describe them.
</p>

<hr class="is-large is-visible">

<div class="box is-well is-large is-marginless">
    <span class="tag">Two</span>
    <span class="tag">Tags</span>
</div>

    <span class="tag">Two</span>
    <span class="tag">Tags</span>
<br>


<hr class="is-visible is-large">

<h2 class="title is-4 is-family-sans-serif">Size, Shape and Colors</h2>

The tag comes in many different sizes, shape and colors using `is-[modifier]`.

<br>

<div class="box is-well is-large">
    <span class="tag">normal</span>&nbsp;
    <span class="tag is-medium">medium</span>&nbsp;
    <span class="tag is-large">large</span>
    <hr class="is-smaller">
    <span class="tag is-rounded">rounded</span>&nbsp;
    <span class="tag is-rounded is-danger has-text-weight-semibold">3</span>
    <hr class="is-smaller">
    <span class="tag is-primary">primary</span>&nbsp;
    <span class="tag is-success">success</span>&nbsp;
    <span class="tag is-dark">dark</span>
</div>

<hr>

<a href="http://bulma.io/documentation/elements/tag/" target="blank" class="box is-bordered">
    More variations on &nbsp;→&nbsp; <strong class="has-text-primary">Bulma / Tags</strong></a>
</a>
