Components: headlines & media

Titles, copy and art at the top of a screen. Add these components to a step in the editor and change their settings in the inspector, or ask an agent to; the settings below are the same in both.

Heading

Type Heading. Sets the screen’s key message. Rendered as the page h1 and announced to screen readers on step change: use exactly one per screen, keep <=60 chars (warning above). Optional highlight tints one phrase. Static; no states.

Setting	Type	Required	Description
`text`	string	yes	Headline, keep <=60 visible chars (validate_funnel warns above; a placeholder counts as its fallback). Wrap words in asterisks to set them in the theme accent style (e.g. italic bold): “Losing money on every trade.”; several runs allowed. Also announced to screen readers when the step changes
`highlight`	string	no	Case-sensitive substring of text (compared after placeholders resolve) shown in the primary colour; first match only, no match = no highlight
`size`	”xl” \| “lg” \| “md”	no	xl 30px for a single bold statement of <=30 chars, lg 26px for most questions, md 21px for long or secondary headlines Default: `"lg"`.
`align`	”left” \| “center”	no	Horizontal alignment: center for short punchy copy, left for multi-line reading text Default: `"center"`.

Example

{
  "text": "Your personal plan starts here",
  "highlight": "personal plan",
  "size": "xl",
  "align": "center"
}

Text

Type Text. Adds supporting copy. Wraps, breaks long words and turns label into links; keep to 1-2 sentences. Static; put the main message in Heading.

Setting	Type	Required	Description
`text`	string	yes	Body copy, 1-2 short sentences (<=140 chars). Supports label links; long words wrap
`size`	”md” \| “sm” \| “xs”	no	md 16px body, sm 14px secondary note, xs 12px caption Default: `"md"`.
`tone`	”default” \| “muted”	no	muted = secondary grey (default); default = full-strength text colour for emphasis Default: `"muted"`.
`align`	”left” \| “center”	no	Horizontal alignment: center for short punchy copy, left for multi-line reading text Default: `"center"`.

Example

{
  "text": "We use your answers to tailor the recommendations, timing and level to you.",
  "size": "md",
  "tone": "default",
  "align": "left"
}

Badge

Type Badge. A standalone label, e.g. “BEST DEAL” or “-50%”. One-line UPPERCASE pill, static, no answer. For a label attached to a button, option or plan use that component’s own badge prop instead.

Setting	Type	Required	Description
`text`	string	yes	Label text, keep <=16 chars: shown on one line in UPPERCASE, literal (no placeholders), e.g. “BEST DEAL”, “-50%”, “Most chosen”
`tone`	”accent” \| “primary” \| “success” \| “danger” \| “neutral”	no	Colour role: accent (pink, default) for deals, primary brand, success green, danger red, neutral grey Default: `"accent"`.
`style`	”solid” \| “soft” \| “outline”	no	solid = filled; soft = tinted fill with coloured text; outline = border only (quietest) Default: `"solid"`.
`live`	boolean	no	Adds a pulsing dot before the text, e.g. for “LIVE” or “Online now”; static under reduced motion Default: `false`.
`icon`	”activity” \| “alarm” \| “apple” \| “award” \| “baby” \| “battery” \| “bed” \| “bike” \| “brain” \| “calendar” \| “check” \| “chart” \| “clock” \| “coffee” \| “dumbbell” \| “flame” \| “flower” \| “footprints” \| “gift” \| “heart” \| “leaf” \| “lightning” \| “lock” \| “moon” \| “mountain” \| “music” \| “person” \| “ruler” \| “salad” \| “scale” \| “shield” \| “smile” \| “sparkles” \| “star” \| “sun” \| “target” \| “thumbs-up” \| “timer” \| “trophy” \| “upload” \| “users” \| “water” \| “yoga” \| “x” \| “zap” \| “heart-pulse” \| “stethoscope” \| “pill” \| “syringe” \| “thermometer” \| “weight” \| “hand-heart” \| “eye” \| “ear” \| “bone” \| “carrot” \| “cherry” \| “cookie” \| “pizza” \| “sandwich” \| “egg” \| “fish” \| “beef” \| “wheat” \| “cup-soda” \| “wine” \| “candy” \| “soup” \| “milk” \| “waves” \| “medal” \| “flag” \| “goal” \| “bed-double” \| “cloud-moon” \| “sunrise” \| “sunset” \| “wind” \| “feather” \| “brain-circuit” \| “book-open” \| “headphones” \| “glasses” \| “home” \| “briefcase” \| “car” \| “plane” \| “map-pin” \| “globe” \| “dog” \| “cat” \| “shopping-bag” \| “wallet” \| “credit-card” \| “piggy-bank” \| “gamepad” \| “tv” \| “smartphone” \| “laptop” \| “camera” \| “palette” \| “graduation-cap” \| “smile-plus” \| “frown” \| “meh” \| “laugh” \| “angry” \| “heart-crack” \| “party-popper” \| “check-circle” \| “x-circle” \| “alert-triangle” \| “info” \| “help-circle” \| “plus” \| “minus” \| “arrow-right” \| “trending-up” \| “trending-down” \| “bar-chart” \| “pie-chart” \| “percent” \| “tag” \| “badge-check” \| “crown” \| “gem” \| “rocket” \| “key” \| “bell” \| “mail” \| “phone” \| “message-circle” \| “search” \| “settings” \| “sliders” \| “refresh” \| “infinity” \| “hourglass” \| “calendar-check” \| “list-checks” \| “clipboard” \| “file-text” \| “lightbulb” \| “puzzle” \| “magnet” \| “anchor” \| “user-check” \| “user-plus” \| “users-round” \| “handshake” \| “thumbs-down” \| “star-half”	no	Icon before the text
`size`	”sm” \| “md” \| “lg”	no	sm 10px, md 11px, lg button-size text; use lg for a hero label Default: `"md"`.
`align`	”left” \| “center”	no	Horizontal alignment: center for short punchy copy, left for multi-line reading text Default: `"center"`.

Example

{
  "text": "BEST DEAL",
  "tone": "success",
  "style": "solid",
  "icon": "badge-check",
  "size": "lg",
  "align": "center"
}

Hero art

Type Hero. Welcomes with artwork and a label. Decorative gradient/icon art or a photo with an optional eyebrow chip, hidden from assistive tech: the message belongs in a Heading. Use once, at the top of the first screen.

Setting	Type	Required	Description
`icon`	”activity” \| “alarm” \| “apple” \| “award” \| “baby” \| “battery” \| “bed” \| “bike” \| “brain” \| “calendar” \| “check” \| “chart” \| “clock” \| “coffee” \| “dumbbell” \| “flame” \| “flower” \| “footprints” \| “gift” \| “heart” \| “leaf” \| “lightning” \| “lock” \| “moon” \| “mountain” \| “music” \| “person” \| “ruler” \| “salad” \| “scale” \| “shield” \| “smile” \| “sparkles” \| “star” \| “sun” \| “target” \| “thumbs-up” \| “timer” \| “trophy” \| “upload” \| “users” \| “water” \| “yoga” \| “x” \| “zap” \| “heart-pulse” \| “stethoscope” \| “pill” \| “syringe” \| “thermometer” \| “weight” \| “hand-heart” \| “eye” \| “ear” \| “bone” \| “carrot” \| “cherry” \| “cookie” \| “pizza” \| “sandwich” \| “egg” \| “fish” \| “beef” \| “wheat” \| “cup-soda” \| “wine” \| “candy” \| “soup” \| “milk” \| “waves” \| “medal” \| “flag” \| “goal” \| “bed-double” \| “cloud-moon” \| “sunrise” \| “sunset” \| “wind” \| “feather” \| “brain-circuit” \| “book-open” \| “headphones” \| “glasses” \| “home” \| “briefcase” \| “car” \| “plane” \| “map-pin” \| “globe” \| “dog” \| “cat” \| “shopping-bag” \| “wallet” \| “credit-card” \| “piggy-bank” \| “gamepad” \| “tv” \| “smartphone” \| “laptop” \| “camera” \| “palette” \| “graduation-cap” \| “smile-plus” \| “frown” \| “meh” \| “laugh” \| “angry” \| “heart-crack” \| “party-popper” \| “check-circle” \| “x-circle” \| “alert-triangle” \| “info” \| “help-circle” \| “plus” \| “minus” \| “arrow-right” \| “trending-up” \| “trending-down” \| “bar-chart” \| “pie-chart” \| “percent” \| “tag” \| “badge-check” \| “crown” \| “gem” \| “rocket” \| “key” \| “bell” \| “mail” \| “phone” \| “message-circle” \| “search” \| “settings” \| “sliders” \| “refresh” \| “infinity” \| “hourglass” \| “calendar-check” \| “list-checks” \| “clipboard” \| “file-text” \| “lightbulb” \| “puzzle” \| “magnet” \| “anchor” \| “user-check” \| “user-plus” \| “users-round” \| “handshake” \| “thumbs-down” \| “star-half”	no	Large icon centred on the art; unused when image is set Default: `"sparkles"`.
`image`	string	no	Photo URL that replaces the gradient/icon art. Decorative (no alt), so a photo that carries information belongs in an Image
`aspect`	”16:10” \| “16:9” \| “4:3” \| “1:1” \| “3:4”	no	Height of the art relative to its width; 16:10 keeps the first question above the fold, 3:4 is a tall poster Default: `"16:10"`.
`eyebrow`	string	no	Small chip in the top-left corner, aim <=24 chars, e.g. “1-MINUTE QUIZ”; literal text, no placeholders
`eyebrowStyle`	”solid” \| “glass” \| “accent”	no	solid = page-colour chip (primary on art without a photo); glass = translucent dark blur with white text, for photos; accent = primary-colour chip Default: `"solid"`.
`style`	”gradient” \| “soft”	no	gradient = brand gradient with a white icon; soft = tinted block with a primary-colour icon (without image) Default: `"gradient"`.
`bleed`	boolean	no	Run edge to edge across the screen, past the side padding; corners stay square Default: `false`.

Example

{
  "icon": "sparkles",
  "aspect": "16:10",
  "eyebrow": "1-MINUTE QUIZ",
  "style": "gradient"
}

Image

Type Image. Displays a single image at full column width inside a fixed aspect frame. fit controls crop/contain/stretch and position controls alignment; lazy-loaded on the theme surface. Always give alt (empty = decorative). Static.

Setting	Type	Required	Description
`src`	string	yes	Image URL (from upload_asset or use_unsplash_photo); prefer >=800px wide. Fitted into the aspect box per fit/position (default cover crops to fill, centred)
`alt`	string	no	What the image shows, <=200 chars, for screen readers and as the broken-image fallback. Describe the content, not “image of”. Empty string marks the image decorative; leave it empty only when it adds no information Default: `""`.
`aspect`	”1:1” \| “4:3” \| “16:9” \| “3:4”	no	Crop ratio width:height: 16:9 banner, 4:3 default, 1:1 square, 3:4 portrait Default: `"4:3"`.
`rounded`	boolean	no	Apply the theme corner radius; false = square corners Default: `true`.
`bleed`	boolean	no	Run edge to edge across the screen, past the side padding; corners stay square Default: `false`.
`fit`	”cover” \| “contain” \| “fill”	no	How the image scales inside the aspect frame: cover fills and may crop; contain shows the whole image with theme surface in any free space; fill stretches to the frame Default: `"cover"`.
`position`	”center” \| “top” \| “bottom” \| “left” \| “right”	no	Image alignment inside the aspect frame; most useful with cover cropping or contain free space Default: `"center"`.

Example

{
  "src": "https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=900&q=80",
  "alt": "Woman exercising on a yoga mat",
  "aspect": "4:3",
  "rounded": true,
  "fit": "cover",
  "position": "center"
}

Video

Type Video. Loops silently or plays on tap. autoplay true = muted looping clip, no controls; false = native controls with sound. Has no caption or label of its own, so do not rely on speech alone. Set a poster. Keep files small (~5 MB) for mobile.

Setting	Type	Required	Description
`src`	string	yes	MP4 (H.264) or WebM URL; prefer short clips under ~5 MB
`poster`	string	no	Image shown until the first frame is ready; set it for every video so the slot never flashes empty
`aspect`	”1:1” \| “4:3” \| “16:9” \| “3:4” \| “9:16”	no	Frame ratio width:height; 9:16 for vertical phone footage. The video is cropped to fill it Default: `"16:9"`.
`autoplay`	boolean	no	true = muted looping clip with no controls (GIF-like; browsers only autoplay muted video). false = native controls, visitor taps to play with sound Default: `true`.
`rounded`	boolean	no	Apply the theme corner radius; false = square corners Default: `true`.

Example

{
  "src": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
  "autoplay": true,
  "rounded": true
}

Lottie animation

Type Lottie. Adds celebratory vector motion. Autoplays and loops; under reduced motion or autoplay false it shows the first frame and plays on tap or Enter (announced “Play animation”). Decorative: never the only carrier of information.

Setting	Type	Required	Description
`src`	string	yes	URL to a Lottie animation: your own .json/.lottie file or a path from list_lottie_animations
`aspect`	”1:1” \| “4:3” \| “16:9” \| “3:4”	no	Frame ratio width:height; the animation is fitted inside without cropping Default: `"1:1"`.
`loop`	boolean	no	Replay continuously; false = play once and rest on the last frame (use for a one-off celebration) Default: `true`.
`autoplay`	boolean	no	true = starts on its own; false = shows the first frame until the visitor taps it Default: `true`.
`speed`	number	no	Playback speed multiplier, 0.25-3 (1 = authored speed) Default: `1`.
`background`	”transparent” \| “surface”	no	transparent lets the page show through; surface fills the frame with the theme surface colour Default: `"transparent"`.
`rounded`	boolean	no	Round the frame corners with the theme radius (visible with background “surface”) Default: `true`.

Example

{
  "src": "/api/lottie/gift.json",
  "aspect": "1:1"
}

Image carousel

Type ImageCarousel. Swipe through an image gallery. 2-10 slides at 82% width so the next peeks, looping both ways, with dot buttons (keyboard-navigable). autoplaySeconds pauses while dragging. Give each informative slide alt; captions optional. Writes no answer.

Setting	Type	Required	Description
`images`	object[]	yes	2-10 slides in order; the gallery loops in both directions and shows dots below
`aspect`	”1:1” \| “4:3” \| “3:4” \| “9:16”	no	Shared slide ratio width:height; slides are 82% of the column width so the next one peeks Default: `"3:4"`.
`autoplaySeconds`	integer	no	Move to the next slide every N seconds (1-20); 0 = swipe only. Pauses while the visitor drags Default: `0`.

Example

{
  "images": [
    {
      "src": "https://images.unsplash.com/photo-1506629082955-511b1aa562c8?auto=format&fit=crop&w=720&q=80",
      "alt": "Woman stretching outdoors",
      "caption": "Move with confidence"
    },
    {
      "src": "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=720&q=80",
      "alt": "Guided strength workout",
      "caption": "Short daily workouts"
    },
    {
      "src": "https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=720&q=80",
      "alt": "Healthy meal",
      "caption": "Simple meal guidance"
    }
  ],
  "aspect": "4:3",
  "autoplaySeconds": 3
}

Spacer

Type Spacer. Adds vertical breathing room. Invisible, hidden from assistive tech; prefer fewer components over stacking spacers.

Setting	Type	Required	Description
`size`	”sm” \| “md” \| “lg”	no	Extra gap on top of the standard 16px between components: sm 8px, md 16px, lg 32px Default: `"md"`.

Example

{
  "size": "md"
}

​Heading

​Text

​Badge

​Hero art

​Image

​Video

​Lottie animation

​Image carousel

​Spacer

Heading

Text

Badge

Hero art

Image

Video

Lottie animation

Image carousel

Spacer