Foundation Labels

Foundation Labels are small UI elements used to highlight information, mark status, or categorize content. This chapter will introduce various uses of Foundation labels.

Basic Labels

Use the .label class to create basic labels:

<span class="label">Default Label</span>

Label Colors

Foundation provides multiple predefined label colors:

<span class="label primary">Primary</span>
<span class="label secondary">Secondary</span>
<span class="label success">Success</span>
<span class="label warning">Warning</span>
<span class="label alert">Alert</span>

Color Usage Guide

Class	Color	Common Use
`.primary`	Blue	Primary information, default state
`.secondary`	Gray	Secondary information, neutral state
`.success`	Green	Success, completed, online
`.warning`	Yellow	Warning, pending, attention
`.alert`	Red	Error, danger, urgent

Labels in Text

Labels can be embedded in paragraphs or headings:

<h1>Product Name <span class="label">New</span></h1>

<h2>Version 2.0 <span class="label success">Stable</span></h2>

<p>
    This feature is currently <span class="label warning">In Testing</span>,
    please use with caution.
</p>

Badges

Badges are label variants, typically used to display numbers or counts:

<span class="badge">1</span>
<span class="badge primary">5</span>
<span class="badge secondary">10</span>
<span class="badge success">99+</span>
<span class="badge warning">3</span>
<span class="badge alert">!</span>

<ul class="menu">
    <li><a href="#">Inbox <span class="badge primary">5</span></a></li>
    <li><a href="#">Drafts <span class="badge secondary">2</span></a></li>
    <li><a href="#">Trash <span class="badge alert">10</span></a></li>
</ul>

Badges with Buttons

<a class="button" href="#">
    Messages <span class="badge">3</span>
</a>

<a class="button alert" href="#">
    Notifications <span class="badge" style="background: white; color: #cc4b37;">99+</span>
</a>

Custom Label Styles

Rounded Labels

<style>
    .label.rounded {
        border-radius: 50px;
        padding-left: 12px;
        padding-right: 12px;
    }
</style>

<span class="label rounded">Rounded</span>
<span class="label rounded primary">Primary</span>
<span class="label rounded success">Success</span>

Hollow Labels

<style>
    .label.hollow {
        background: transparent;
        border: 1px solid currentColor;
    }
    .label.hollow.primary { color: #1779ba; }
    .label.hollow.success { color: #3adb76; }
    .label.hollow.warning { color: #ffae00; }
    .label.hollow.alert { color: #cc4b37; }
</style>

<span class="label hollow primary">Primary</span>
<span class="label hollow success">Success</span>
<span class="label hollow warning">Warning</span>
<span class="label hollow alert">Alert</span>

Labels with Icons

<span class="label success">
    <i class="fi-check"></i> Completed
</span>

<span class="label warning">
    <i class="fi-clock"></i> In Progress
</span>

<span class="label alert">
    <i class="fi-x"></i> Cancelled
</span>

Label Sizes

Create labels of different sizes:

<style>
    .label.tiny {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    .label.small {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    .label.large {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
</style>

<span class="label tiny">Tiny</span>
<span class="label small">Small</span>
<span class="label">Default</span>
<span class="label large">Large</span>

Removable Labels

Create closable labels:

<style>
    .label.removable {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .label.removable .remove-btn {
        cursor: pointer;
        opacity: 0.7;
        font-weight: bold;
    }
    .label.removable .remove-btn:hover {
        opacity: 1;
    }
</style>

<span class="label removable primary">
    JavaScript
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

<span class="label removable success">
    HTML
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

<span class="label removable warning">
    CSS
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

Label Groups

Create a group of related labels:

<style>
    .label-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
</style>

<div class="label-group">
    <span class="label">Frontend</span>
    <span class="label">React</span>
    <span class="label">Vue</span>
    <span class="label">Angular</span>
    <span class="label">Node.js</span>
</div>

Status Label Examples

Order Status

<table>
    <thead>
        <tr>
            <th>Order ID</th>
            <th>Amount</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ORD001</td>
            <td>$199</td>
            <td><span class="label success">Completed</span></td>
        </tr>
        <tr>
            <td>ORD002</td>
            <td>$299</td>
            <td><span class="label warning">Shipping</span></td>
        </tr>
        <tr>
            <td>ORD003</td>
            <td>$99</td>
            <td><span class="label primary">Pending Payment</span></td>
        </tr>
        <tr>
            <td>ORD004</td>
            <td>$599</td>
            <td><span class="label alert">Cancelled</span></td>
        </tr>
    </tbody>
</table>

User Roles

<ul class="no-bullet">
    <li>
        John <span class="label alert">Admin</span>
    </li>
    <li>
        Jane <span class="label primary">Editor</span>
    </li>
    <li>
        Bob <span class="label secondary">User</span>
    </li>
</ul>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Labels Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .label { margin-right: 5px; margin-bottom: 5px; }

        /* Custom styles */
        .label.rounded { border-radius: 50px; padding-left: 12px; padding-right: 12px; }
        .label.hollow { background: transparent; border: 1px solid currentColor; }
        .label.hollow.primary { color: #1779ba; }
        .label.hollow.success { color: #3adb76; }
        .label.hollow.warning { color: #ffae00; }
        .label.hollow.alert { color: #cc4b37; }

        .label.tiny { font-size: 0.6rem; padding: 0.2rem 0.4rem; }
        .label.small { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
        .label.large { font-size: 1rem; padding: 0.5rem 0.75rem; }

        .label.removable {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .label.removable .remove-btn {
            cursor: pointer;
            opacity: 0.7;
        }
        .label.removable .remove-btn:hover { opacity: 1; }

        .label-group { display: flex; flex-wrap: wrap; gap: 5px; }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Labels Showcase</h1>

        <div class="demo-section">
            <h3>Basic Labels</h3>
            <span class="label primary">Primary</span>
            <span class="label secondary">Secondary</span>
            <span class="label success">Success</span>
            <span class="label warning">Warning</span>
            <span class="label alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>Badges</h3>
            <span class="badge">1</span>
            <span class="badge primary">5</span>
            <span class="badge secondary">10</span>
            <span class="badge success">99+</span>
            <span class="badge warning">3</span>
            <span class="badge alert">!</span>
        </div>

        <div class="demo-section">
            <h3>Label Sizes</h3>
            <span class="label tiny primary">Tiny</span>
            <span class="label small primary">Small</span>
            <span class="label primary">Default</span>
            <span class="label large primary">Large</span>
        </div>

        <div class="demo-section">
            <h3>Rounded Labels</h3>
            <span class="label rounded primary">Primary</span>
            <span class="label rounded success">Success</span>
            <span class="label rounded warning">Warning</span>
            <span class="label rounded alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>Hollow Labels</h3>
            <span class="label hollow primary">Primary</span>
            <span class="label hollow success">Success</span>
            <span class="label hollow warning">Warning</span>
            <span class="label hollow alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>Labels with Icons</h3>
            <span class="label success"><i class="fi-check"></i> Completed</span>
            <span class="label warning"><i class="fi-clock"></i> In Progress</span>
            <span class="label alert"><i class="fi-x"></i> Cancelled</span>
            <span class="label primary"><i class="fi-star"></i> Featured</span>
        </div>

        <div class="demo-section">
            <h3>Removable Labels</h3>
            <span class="label removable primary">
                JavaScript <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
            <span class="label removable success">
                HTML <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
            <span class="label removable warning">
                CSS <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
        </div>

        <div class="demo-section">
            <h3>In Headings</h3>
            <h2>Foundation 6 <span class="label success">Latest</span></h2>
            <h4>Preview <span class="label warning">Beta</span></h4>
        </div>

        <div class="demo-section">
            <h3>Label Groups</h3>
            <div class="label-group">
                <span class="label">HTML</span>
                <span class="label">CSS</span>
                <span class="label">JavaScript</span>
                <span class="label">React</span>
                <span class="label">Vue</span>
                <span class="label">Node.js</span>
            </div>
        </div>

        <div class="demo-section">
            <h3>Badges in Navigation</h3>
            <ul class="menu">
                <li><a href="#">Inbox <span class="badge primary">5</span></a></li>
                <li><a href="#">Drafts <span class="badge secondary">2</span></a></li>
                <li><a href="#">Sent</a></li>
                <li><a href="#">Trash <span class="badge alert">10</span></a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Status Label Example</h3>
            <table class="hover">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>ORD001</td>
                        <td>John</td>
                        <td>$199</td>
                        <td><span class="label success">Completed</span></td>
                    </tr>
                    <tr>
                        <td>ORD002</td>
                        <td>Jane</td>
                        <td>$299</td>
                        <td><span class="label warning">Shipping</span></td>
                    </tr>
                    <tr>
                        <td>ORD003</td>
                        <td>Bob</td>
                        <td>$99</td>
                        <td><span class="label primary">Pending Payment</span></td>
                    </tr>
                    <tr>
                        <td>ORD004</td>
                        <td>Alice</td>
                        <td>$599</td>
                        <td><span class="label alert">Cancelled</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Label Best Practices

Semantic Colors: Use appropriate colors to convey status meaning
Concise Text: Label text should be short and clear
Moderate Use: Avoid using too many labels on a page to prevent visual clutter
Contrast: Ensure adequate contrast between label text and background
Accessibility: Don't rely solely on color to convey important information

<!-- Good practice: color + icon + text -->
<span class="label success">
    <i class="fi-check" aria-hidden="true"></i> Completed
</span>

<!-- Avoid: color only -->
<span class="label success"></span>
<span class="label alert"></span>

Summary

In this chapter, we learned:

Creating basic labels and color variants
Using badges
Custom label styles (rounded, hollow, with icons)
Label size control
Removable labels and label groups
Labels in practical scenarios

Next chapter, we will learn Foundation Alerts.

Tip: Labels are an effective way to mark information, but be careful not to overuse them. Keep your page clean and readable.

#Foundation Labels

#Basic Labels

#Label Colors

#Color Usage Guide

#Labels in Text

#Badges

#Badges with Navigation

#Badges with Buttons

#Custom Label Styles

#Rounded Labels

#Hollow Labels

#Labels with Icons

#Label Sizes

#Removable Labels

#Label Groups

#Status Label Examples

#Order Status

#User Roles

#Complete Example

#Label Best Practices

#Summary