data-badge / data-callout

Inline badge shapes and block callout containers using CSS shape() — ribbon, notch, flag, speech, notched, tip.

Badges

Apply data-badge with a shape value to any inline element (typically <span>) to create a shaped label. The shape is applied via clip-path, so it works with any background color. Padding auto-adjusts per shape to prevent text clipping.

Note: This is separate from time[data-badge], which is a boolean attribute for pill-shaped date badges. Shape badges use specific string values.

Value Shape Description
ribbon Arrow notch on right Tag/label with rightward direction
notch Arrow notch on left Indented left edge, like a bookmark
flag Pointed right side Directional flag or pennant shape
double-arrow Points on both sides Bidirectional, breadcrumb-style
stamp Slightly rounded corners Certification or approval stamp
<span data-badge="ribbon">Sale</span> <span data-badge="flag">New</span> <span data-badge="double-arrow">Featured</span> <span data-badge="stamp">Certified</span>

Badges use --color-primary and --color-on-primary by default. Override with a custom background class for color variations.

Callouts

Apply data-callout to block containers for shaped callout boxes. The speech bubble tail is part of the shape() path — no pseudo-element hacks needed.

Value Shape Description
speech Rounded rectangle with bottom-left tail Quotations, testimonials, speech attribution
notched Top-right corner bevel Technical notes, warnings, configurations
tip Left accent border Tips, hints, info boxes (no shape() needed)
<blockquote data-callout="speech"> <p>The speech callout tail is pure CSS shape().</p> </blockquote> <aside data-callout="notched"> <p><strong>Note:</strong> Corner bevel adjustable via --shape-bevel.</p> </aside> <!-- Large bevel override --> <aside data-callout="notched" class="large-bevel"> <p>Custom bevel: --shape-bevel: 40px</p> </aside> <aside data-callout="tip"> <p><strong>Tip:</strong> Works everywhere, no shape() needed.</p> </aside>

Demos