v5 · block

Callout

One statement of impact, paired with an icon. Used for stats, performance claims, and key moments where a single line should land hard.

Canonical render

variant="expressive", hue="blue", icon="click".

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.*

Variants

Three surface intents: text-only, tinted, and full-bleed.

variant="basic"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

variant="expressive"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

variant="fullColor"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

Hues (fullColor variant)

Six palette presets. The block rebinds the four substrate primitives on itself via [data-hue="X"] — no theme cascade, no complementary remapping. orange retired from v4.

hue="blue"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="aqua"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="earth"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="green"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="magenta"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="purple"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

Hues (expressive variant)

Tinted-surface treatment. Tint is derived per hue via color-mix(in srgb, var(--callout-accent) 6%, var(--color-bg)) — no extra token per hue.

hue="blue"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="aqua"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="earth"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="green"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="magenta"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

hue="purple"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

Icons

icon="barChart"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

icon="click"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

icon="people"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

icon="quote"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

icon="trendingUp"

Indeed Sponsored Jobs receive 45% more clicks than non-sponsored jobs on average.

When to use

  • To land a single, high-impact stat or claim that supports the surrounding narrative.
  • Inside a longer page to break up dense reading with one strong moment.
  • When the number or claim deserves visual weight without becoming a full hero.

When not to use

  • For multi-point content. Use a card group or feature row instead.
  • For pure decoration with no claim — the icon is paired with substance.
  • Back-to-back. One callout per section is the rule of thumb.

v4 → v5 diff

  • Retired: layout="row" (no substrate grid in v5; pages compose ad-hoc).
  • Retired: hue="orange" (no v4 themes.css entry; was a footnote).
  • Retired: size (sm/md/lg → min-block-size). Pacing is the domain's job — block height = content + substrate padding. Marketing's domain runs hotter than longform's already; a specific moment that wants extra breathing wraps in a section with its own padding override.
  • Redesigned: hue mechanism. v4 set data-theme on root and pulled the complementary slot; v5 rebinds the four substrate primitives directly per [data-hue].
  • Simplified: fullColor decorative shape is one block-local SVG (per the block-local shapes policy), no per-hue shape variation.