Skip to content

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.

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.

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

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

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

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>
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
Sizepaddingfont-sizeborder-radius
Small2px 8px12px10px
Medium (Default)4px 12px14px12px
Large6px 16px16px14px
  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>
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