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>

Badges with Navigation

<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

1. Semantic Colors: Use appropriate colors to convey status meaning
2. Concise Text: Label text should be short and clear
3. Moderate Use: Avoid using too many labels on a page to prevent visual clutter
4. Contrast: Ensure adequate contrast between label text and background
5. 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.