> ## Documentation Index
> Fetch the complete documentation index at: https://docs.funeli.top/llms.txt
> Use this file to discover all available pages before exploring further.

# Components: headlines & media

> Reference for the Funeli headlines & media components: what each one is for, every setting with its type and default, and a working example.

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"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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](https://...) 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](https://...) 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"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "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"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "size": "md"
> }
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.