Usage

The lightest hero in the family. A single tinted card with an eyebrow, a heading, an optional product image, and a decorative gradient shape behind it. Use it as a page anchor when the visual weight of a full hero would overwhelm the content below.

Content length

Eyebrow renders as an h1 for SEO and is the page's primary landmark. Aim for 2–4 words. The eyebrow is uppercased and letter-spaced, so anything longer than ~30 characters starts to wrap awkwardly.

Heading renders as an h2 with display weight. One sentence, ~80 characters or fewer reads cleanly at every breakpoint. The field is a rich-text editor with bold, italic, underline, and adh_claim embeds for inline citation superscripts.

Variations

Background color — background (white) or background.weaker (light gray neutral). The tinted card inside the hero always uses the active theme's primary palette and is not authorable.

Image — the schema includes an optional image_field group (image + alt text). When provided, the image renders on the right at large breakpoints and below the text on small screens; the card's vertical padding and the shape's positioning shift to accommodate it.

Decorative shape

A fixed gradient blob sits behind the card, blending the theme's primary at grade 300 into the surrounding section background. It is not authorable — the shape is always present, and its position adjusts automatically based on whether an image is supplied.

Color cascade

The card background uses the active page theme's primary palette at grade 300 (a light tint). The eyebrow text uses the same primary at grade 900 (a deep tone). The page heading stays in neutral foreground — only the card, the eyebrow, and the shape's upper gradient stop shift with the theme.

Page theme	Card	Eyebrow
blue
ai-blue
ai-green
aqua
earth
green
magenta
purple