Vanilla Breeze

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

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)

Demos
↑