Skip to content
Communications EO Resources

Badge

Badges are small, inline labels used to highlight key information, categorize content, or indicate status. They provide quick visual identification and improve content scannability.

This component is designed for easy copy-paste use in the Edlio CMS WYSIWYG editor with zero dependencies.

Key Features

Section titled “Key Features”

No Dependencies

Pure HTML and inline CSS — works immediately in Edlio CMS with no external stylesheets or scripts.

Brand Compliant

Uses official PUSD colors: Navy (#003366), Light Blue (#54c8eb), and Gold (#f0ad4e), plus semantic status colors.

Multiple Variants

Six style categories: Primary, Secondary, Semantic Status, Outline, Size Variants, and Pill — plus contextual usage examples.

Accessible

Semantic <span> elements, WCAG AA contrast ratios, font-weight 600, and full screen reader compatibility with no JavaScript required.

Variants

Section titled “Variants”

Primary Brand Colors

Section titled “Primary Brand Colors”

Use these for main content categories and primary information.

BadgeBackgroundTextUse For
PUSD Navy#003366#ffffffPrimary brand, important categories
Light Blue#54c8eb#003366Secondary brand, informational
Gold#f0ad4e#ffffffAccent, warnings, highlights

Secondary Colors

Section titled “Secondary Colors”

Use these for supporting information and subtle categorization.

BadgeBackgroundTextUse For
Alt 1#dce0ef#003366Subtle emphasis
Alt 2#a5afd6#003366Moderate emphasis
Alt 3#3a57a8#ffffffStrong emphasis

Semantic Status

Section titled “Semantic Status”

Use these to indicate status, outcomes, or alert levels.

BadgeBackgroundTextUse For
Success#4caf50#ffffffPositive status, confirmations
Info#54c8eb#003366Informational status
Warning#f0ad4e#ffffffCaution, non-critical notices
Error#d32f2f#ffffffErrors, critical issues

Copy-Paste Code

Section titled “Copy-Paste Code”

Select any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

<!-- PUSD NAVY BADGE -->
<span style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 12px; background-color: #003366; color: #ffffff; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap;">PUSD Navy</span>


<!-- PUSD LIGHT BLUE BADGE -->
<span style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 12px; background-color: #54c8eb; color: #003366; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap;">Light Blue</span>


<!-- PUSD GOLD BADGE -->
<span style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 12px; background-color: #f0ad4e; color: #ffffff; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap;">Gold</span>

Customization Guide

Section titled “Customization Guide”

Color Reference

Section titled “Color Reference”
Color NameHEXText ColorUse For
PUSD Navy#003366#ffffffPrimary brand, important categories
PUSD Light Blue#54c8eb#003366Secondary brand, informational
PUSD Gold#f0ad4e#ffffffAccent, warnings, highlights
Alt 1 (Light Gray-Blue)#dce0ef#003366Subtle emphasis
Alt 2 (Medium Blue)#a5afd6#003366Moderate emphasis
Alt 3 (Deep Blue)#3a57a8#ffffffStrong emphasis
Success (Green)#4caf50#ffffffPositive status
Error (Red)#d32f2f#ffffffNegative status

Size Reference

Section titled “Size Reference”
Sizepaddingfont-sizeborder-radius
Small2px 8px12px10px
Medium (Default)4px 12px14px12px
Large6px 16px16px14px

Quick Customization Tips

Section titled “Quick Customization Tips”

  1. Change the text — Replace the content between the <span> tags.

  2. Change the color — Update background-color and color values using the HEX codes from the color reference table above.

  3. Make it an outline badge — Set background-color: transparent, reduce padding by 1px on each side, and add border: 2px solid [color].

  4. Make it a pill shape — Change border-radius to 999px.

  5. Adjust the size — Modify padding and font-size using the size reference table above.

  6. Group multiple badges — Wrap them in a flex container:

    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
      <!-- badges go here -->
    </div>

When to Use Badges

Section titled “When to Use Badges”
Use CaseExampleRecommended Variant
Status indicatorsNew, Updated, ActiveSemantic (Success, Info, Warning)
Category labelsDepartment names, subject areasPrimary or Secondary
Dates and timestampsDecember 2025, Q3Small, Light Blue
Tags and keywordsTechnology, Arts, STEMPrimary or Secondary group
Counts and metrics12 Items, 3 NewSmall, Navy or Gold

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”