Indicators
Caption Flag
Small promotional or status label that sits above or beside content without dominating the layout.
Loading playground
Overview
Caption Flag is a small promotional or status label ("New", "Sale", and similar) that sits above or beside content. It is intentionally low-chrome so it draws attention without competing with the surrounding caption or tile.
Key Business & UX Benefits
- Low-chrome styling adds promotional context without stealing focus from the product or content, which protects the existing visual hierarchy on busy grids.
- A single caption flag pattern keeps "New", "Sale", and similar callouts consistent across editorial tiles, category cards, and content blocks.
- Merchandisers can flag fresh stock or campaigns through Studio without raising a design ticket each time inventory turns over.
- Predictable placement above or beside the caption avoids the layout shift that ad-hoc badges cause on responsive grids.
Feature List
- Two `variant` values ('plain', 'boxed') cover low-chrome inline labels and stronger box-styled callouts
- Seven `colorScheme` values ('primary', 'accent', 'grey', 'neutral', 'success', 'error', 'warning') apply only in the boxed variant for semantic flags
- Caption size auto-shifts between caption-s (plain) and caption-xs (boxed), keeping the flag proportional to the surrounding tile
- Uppercase text transform reads as a flag at a glance without bespoke typography overrides
- Predictable above-or-beside placement avoids the layout shift ad-hoc badges cause on responsive grids
API Reference
| Prop | Default | Type |
|---|---|---|
text | string | |
colorScheme | primary | "error" | "primary" | "accent" | "grey" | "neutral" | "success" | "warning" |
variant | plain | "boxed" | "plain" |
textShadow | none | "none" | "soft" | "strong" |