W3.CSS — Labels

Basic Label

<span class="w3-tag w3-red">Red Label</span>
<span class="w3-tag w3-blue">Blue Label</span>
<span class="w3-tag w3-green">Green Label</span>

Label Colors

<span class="w3-tag w3-red">Red</span>
<span class="w3-tag w3-pink">Pink</span>
<span class="w3-tag w3-purple">Purple</span>
<span class="w3-tag w3-deep-purple">Deep Purple</span>
<span class="w3-tag w3-indigo">Indigo</span>
<span class="w3-tag w3-blue">Blue</span>
<span class="w3-tag w3-light-blue">Light Blue</span>
<span class="w3-tag w3-cyan">Cyan</span>
<span class="w3-tag w3-teal">Teal</span>
<span class="w3-tag w3-green">Green</span>
<span class="w3-tag w3-light-green">Light Green</span>
<span class="w3-tag w3-lime">Lime</span>
<span class="w3-tag w3-yellow">Yellow</span>
<span class="w3-tag w3-amber">Amber</span>
<span class="w3-tag w3-orange">Orange</span>
<span class="w3-tag w3-deep-orange">Deep Orange</span>

Label Sizes

<span class="w3-tag w3-red w3-small">Small</span>
<span class="w3-tag w3-blue w3-medium">Medium</span>
<span class="w3-tag w3-green w3-large">Large</span>

Label Styles

<!-- Round label -->
<span class="w3-tag w3-blue w3-round">Round</span>

<!-- Round small label -->
<span class="w3-tag w3-green w3-round-small">Round Small</span>

<!-- Round large label -->
<span class="w3-tag w3-red w3-round-large">Round Large</span>

Label Examples

<!-- Tags on article -->
<div class="w3-container">
    <h3>Article Tags</h3>
    <span class="w3-tag w3-blue">HTML</span>
    <span class="w3-tag w3-green">CSS</span>
    <span class="w3-tag w3-orange">JavaScript</span>
    <span class="w3-tag w3-purple">Web Design</span>
</div>

<!-- Labels in table -->
<table class="w3-table w3-striped">
    <tr>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>John</td>
        <td><span class="w3-tag w3-green">Active</span></td>
    </tr>
    <tr>
        <td>Jane</td>
        <td><span class="w3-tag w3-red">Inactive</span></td>
    </tr>
</table>

Hover Effect

<span class="w3-tag w3-blue w3-hover-red">Hover to change color</span>

Mini Practice

Create HTML code that:

1. Creates labels with different colors
2. Adds round labels
3. Uses labels in a table
4. Creates a tag cloud

Up Next

Next: Learn about W3.CSS Cards.