Metadata
Three metadata-label patterns: category chips (tinted pill, optional icon), status labels (dot + text), and badge counts. Chips and status labels use buildChip() via .bsn-chip-mount. Badges use buildBadge() via .bsn-badge-mount. All three are reusable components — never hardcode their markup.
Category Chips Component
All 10 palette variants. Use the variant that matches the semantic meaning — see Rules in components.md.
Status Labels Component
Dot + text with no background. Use in table cells and dense list rows. Pass statusDot: true to buildChip().
Icon + Status Chips Component
Heavier visual weight for cards and detail views. Pass an icon name — buildChip() auto-applies chip-md proportions (14px / --type-body, 8px gap).
Dismissible Chips Component
Removable filter chips. Pass dismissible: true.
Badge Counts Component
Compact numeric count indicators — notification counts, item counts. Rendered by buildBadge() via .bsn-badge-mount. Variants: brand · red · blue · neutral.
Flow Goal Labels Component
Marketplace Status Chips Component
Chips that appear on the thumbnail of Marketplace content cards to communicate velocity, availability, and urgency signals. Max 2 per card. Always use buildChip() via .bsn-chip-mount — never hardcode.
chip-yellow — velocity signal, left-anchored. Expired = chip-arches — lapsed access, moderate concern (mirrors "Important" priority). Expires [date] = chip-canyonlands — urgent, action needed before deadline (mirrors "Required" priority). Right-anchored when paired with Trending. Use a short date ("Expires May 26") so urgency is immediate. Never show more than one expiry chip at a time.Inline Labels Component
Low-emphasis typographic callouts that sit inline with body or publisher text. No background, no border — color alone carries the signal. Use when a chip's visual weight would compete with surrounding content (adoption signals, BETA tags, nav callouts). Always pair with a color modifier. Emit via <span class="bsn-inline-label bsn-inline-label--[color]">.
--wasatch (new/informational), --uinta (in-progress/beta), --arches (changed/updated), --canyonlands (danger), --alpine (brand), --secondary (muted). Never use a chip when inline label weight is sufficient.Content Type Chips Component
Outline chips identifying the format of a content item. All types use chip-outline (white background, Alpine border, Alpine text). Pass an icon via icon — placeholder icons shown below; final FA Sharp Solid icon names will be supplied by the design team. Always use buildChip() via .bsn-chip-mount — never hardcode.
Video Duration Chip Component
Read-only chip displaying a video's runtime. Same chip-outline style as content-type chips. Pass the formatted duration string as label — supports mm:ss and h:mm:ss formats. Use a placeholder icon until the icon map is confirmed.
label. Accepted formats: mm:ss (e.g. 4:32) and h:mm:ss (e.g. 1:03:45). The chip is display-only — it carries no interactive behavior unless onClick or href is added.
Priority Level Component
Three tiers of content priority for Scheduler flows and content assignment. Ordered highest to lowest urgency. Arrow icons require FA Pro — they render via the Pro Kit in production.
aria-hidden="true" is set automatically by buildChip()). Never substitute a colored dot for a Priority Level chip. In tables, always render the full chip — never abbreviate to an initial or swatch. Add aria-label="Priority: Required" on the parent container only when no surrounding context clarifies that this chip is a priority indicator.