Hero

section · static (no JavaScript) · no children. All components: component playground.

Description for the model

First screen of a landing page. editorial = magazine cover with a photo; console = dark split with a log panel; adventure = playful with an illustration; cosmos, atlas and notebook = copy on the left and a live interactive package (or a drawing of orbits, a map graticule or an Ulam spiral) on the right.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Hero",
  "props": {
    "variant": "editorial",
    "eyebrow": "Course",
    "title": "Brew a better cup",
    "titleAccent": "better",
    "subtitle": "Learn extraction by tasting.",
    "primaryCta": {
      "label": "Start the course",
      "href": "/courses/1"
    },
    "secondaryCta": {
      "label": "See the syllabus",
      "href": "#syllabus"
    },
    "image": {
      "src": "/og-image.png",
      "alt": "A pour-over coffee brewing on a scale",
      "width": 1200,
      "height": 630
    },
    "caption": "A pour-over, 30 seconds in.",
    "facts": [
      {
        "label": "Lessons",
        "value": "12"
      },
      {
        "label": "Time",
        "value": "3 h"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
variant	"editorial" | "console" | "adventure" | "product" | "cosmos" | "atlas" | "notebook"		Layout. default "editorial"
eyebrow	string		Small label above the title. max length 80
title	string	yes	Headline (the LCP element: keep it short). max length 90
titleAccent	string		Part of the headline to emphasise; must appear in the title. max length 60
subtitle	string		Second line under the headline. max length 160
body	string		Paragraph. max length 500
primaryCta	object		A link or call to action
primaryCta.label	string	yes	Visible text. max length 80
primaryCta.href	string (href)	yes	Target URL. max length 2048
secondaryCta	object		A link or call to action
secondaryCta.label	string	yes	Visible text. max length 80
secondaryCta.href	string (href)	yes	Target URL. max length 2048
image	object		An image with explicit size (prevents layout shift)
image.src	string (href)	yes	Image URL (local /images/… or the tenant storage). max length 2048
image.alt	string	yes	Text alternative; empty string only for decorative images. max length 300
image.width	integer	yes	Intrinsic width in px. ≥ 1
image.height	integer	yes	Intrinsic height in px. ≥ 1
caption	string		Image caption. max length 160
illustration	"none" | "orbi" | "planets"		Inline illustration (adventure variant). default "none"
facts	array of objects		Up to four facts shown under the call to action. max 4 items
facts[].label	string	yes	Label. max length 40
facts[].value	string	yes	Value. max length 60
facts[].note	string		Small note. max length 80
panel	object		Log-style panel for the console variant
panel.title	string		Panel title. max length 80
panel.note	string		Small note under the panel, e.g. ‘Example drill replay’. max length 120
panel.lines	array of objects	yes	Log lines. max 8 items
panel.lines[].time	string		Timestamp. max length 12
panel.lines[].tag	string		Tag. max length 20
panel.lines[].text	string	yes	Line. max length 200
panel.lines[].tone	"neutral" | "ok" | "warn" | "alert" | "info"		Semantic colour. default "neutral"
panel.prompt	string		Command shown at the bottom of the panel, without the $. max length 60
panel.values	array of number		Series drawn as the sparkline (e.g. minutes per module); omit for none. max 24 items
panel.valuesLabel	string		What the sparkline shows, e.g. ‘minutes per module’. max length 60
capabilities	array of objects		Capability orbit for the product variant: cards on up to three orbits around the logo, one highlighted at a time. max 12 items
capabilities[].icon	"check" | "arrow" | "play" | "clock" | "calendar" | "pin" | "users" | "mail" | "shield" | "star" | "moon" | "planet" | "telescope" | "rocket" | "medal" | "book" | "terminal" | "compass" | "sigma" | "pager" | "chart" | "print" | "lock" | "sync" | "quote" | "layers" | "server" | "puzzle" | "cart" | "code" | "sparkle" | "eye" | "chat"		Icon from the catalogue’s icon set
capabilities[].label	string	yes	Short label of the capability (2 to 4 words). max length 32
capabilities[].caption	string	yes	One line shown under the orbit while this capability is highlighted. max length 90
capabilities[].href	string (href)		In-page anchor of the section that shows it, e.g. #living. max length 2048
capabilities[].ring	integer		Orbit the card travels on, 1 = inner. ≥ 1, ≤ 3, default 1
capabilities[].angle	integer		Start angle on the orbit in degrees (0 = right, 90 = below); spreads the cards evenly when omitted. ≥ 0, ≤ 359
capabilities[].status	"available" | "preview" | "coming"		Roadmap status; shown as a Coming marker only in the actual landing mode. default "available"
showcase	object		A live interactive package for the cosmos, atlas and notebook variants; without it the variant draws its own picture. Nothing is tracked.
showcase.src	string (href)	yes	Entry file of the interactive package on the content origin. max length 2048
showcase.title	string	yes	Title of the frame. max length 160
showcase.steps	array of objects	yes	Steps with their text alternatives and posters. min 1 items, max 200 items
showcase.steps[].id	string	yes	Step id. max length 64
showcase.steps[].title	string	yes	Step title. max length 255
showcase.steps[].text	string	yes	Text alternative of the step. max length 4000
showcase.steps[].poster	string (href)		Poster image of the step. max length 2048
showcase.showcase	object	yes	The self-running loop: no step text and no controls, a still first, and a static frame under reduced motion
showcase.showcase.steps	array of string	yes	Steps the hero loops through, slowly, in order. min 1 items, max 12 items
showcase.showcase.poster	string (href)		Still shown until the frame runs, and under reduced motion. max length 2048
showcase.href	string (href)		Where the small link goes (the lesson). max length 2048
showcase.tryLabel	string		Label of the small link. max length 40, default "Try it"
showcase.locale	string		Language of the step texts. max length 16, default "en"
showcase.requires	array of string		Capabilities the package needs. max 5 items
showcase.reducedMotionSupported	boolean		The package handles reduced motion itself. default false
showcase.licence	string		SPDX licence id. max length 64
showcase.attribution	string		Attribution line. max length 1000
showcase.sourceUrl	string (href)		Source code or origin of the package. max length 2048
diff	object		Update-proposal card for the product variant
diff.title	string		Card title, e.g. the lesson being updated. max length 80
diff.source	string		Source the change comes from, e.g. docs/slo.md. max length 80
diff.note	string		Small note under the card. max length 160
diff.lines	array of objects	yes	Diff lines. max 8 items
diff.lines[].op	"add" | "del" | "ctx"		Diff line kind. default "ctx"
diff.lines[].text	string	yes	Line. max length 160
diff.citations	array of string		Citations. max 4 items
diff.action	string		Label of the approve button. max length 30
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Course
Brew a better cup
Learn extraction by tasting.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "title": 123
}

Issues:

• /title expected string, got integer

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 20 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.