Label

cmp-label is one component with five shape modifiers, rather than five separate components — each is useful well beyond any single page (course pages, event pages, announcements). Color modifiers (--olympic, --sanford, --athens, --black, and every other key in the shared color palette) compose with --status; --format deliberately ignores them and always stays neutral.

These labels pair particularly well with Timeline: cmp-timeline deliberately leaves the content inside each <li> as free-form, unstyled text, so --eyebrow and --date are a natural fit for giving a timeline item’s label and date some visual structure without the timeline component itself needing to own that decision.

Eyebrow

Small-caps category text above a heading.

Session 1

<p class="cmp-label cmp-label--eyebrow">Session 1</p>

Date / updated

A styled date stamp, or a smaller “last updated” note for a content page.

August 28, 2026

Updated August 28, 2026

<p class="cmp-label cmp-label--date">August 28, 2026</p>
<p class="cmp-label cmp-label--updated">Updated August 28, 2026</p>

Status

A pill with a background, for state that matters to the reader (New, Required, Optional, In Progress) — not just decoration. Color modifiers set which status color; text color switches automatically between white and black to stay readable, the same contrast logic cmp-stepper and cmp-button use.

Default usage is a <p>, one label per line:

New

Optional

In Progress

Required

<p class="cmp-label cmp-label--status">New</p>
<p class="cmp-label cmp-label--status cmp-label--sanford">Optional</p>
<p class="cmp-label cmp-label--status cmp-label--olympic">In Progress</p>
<p class="cmp-label cmp-label--status cmp-label--black">Required</p>

Use a <span> instead of a <p> to show several inline in a row, or embedded mid-sentence in running text:

NewOptionalIn ProgressRequired

<span class="cmp-label cmp-label--status">New</span>
<span class="cmp-label cmp-label--status cmp-label--sanford">Optional</span>
<span class="cmp-label cmp-label--status cmp-label--olympic">In Progress</span>
<span class="cmp-label cmp-label--status cmp-label--black">Required</span>

Format

Neutral descriptive metadata (a duration, a file type), not a status — deliberately quieter, and ignores color modifiers entirely. Same <p>-by-default, <span>-for-inline choice as Status above.

5 min read

45-minute session

PDF

<p class="cmp-label cmp-label--format">5 min read</p>
<p class="cmp-label cmp-label--format">45-minute session</p>
<p class="cmp-label cmp-label--format">PDF</p>

Use a <span> instead of a <p> to show several inline in a row, or embedded mid-sentence in running text:

5 min read45-minute sessionPDF

<span class="cmp-label cmp-label--format">5 min read</span>
<span class="cmp-label cmp-label--format">45-minute session</span>
<span class="cmp-label cmp-label--format">PDF</span>

Structure

Element	Classes	Purpose
Eyebrow shape	.cmp-label.cmp-label--eyebrow	Small-caps category text above a heading
Date shape	.cmp-label.cmp-label--date	A bold, prominent date stamp
Updated shape	.cmp-label.cmp-label--updated	A quieter italic “last updated” note
Status shape	.cmp-label.cmp-label--status	Pill with a background; composes with color modifiers; text contrast picked automatically
Format shape	.cmp-label.cmp-label--format	Pill with a background; always neutral, ignores color modifiers
Color modifier	.cmp-label--<color>, e.g. --olympic, --sanford	Sets the accent color for Eyebrow, Date, and Status; has no effect on Format

Accessibility

• --status and --format are width: fit-content, not a fixed display, on purpose: apply the class to a <p> for the default one-per-line layout, or to a <span> when several need to sit inline in a row or mid-sentence in running text. <span> is phrasing content and can nest inside a <p> or a sentence; <p> is not phrasing content and cannot nest inside another <p> or inline text, so it forces one label per line rather than a row.
• No new ARIA is needed for any shape — each renders as plain text (or a pill of plain text), and the visible text itself is the entire accessible content.