Hero

Hero renders a large banner with a headline, an optional subheading, an optional call-to-action button, and an optional ambient glyph drawn from the workspace theme. It is almost always the first block inside a NavShell’s children array on marketing pages, but you can also drop a Hero partway down a long page as an anchor for a new section.

Example

hero.json

{
  "block": "Hero",
  "props": {
    "headline": "Welcome to Acme",
    "subheading": "The best widgets in the business.",
    "cta_label": "Sign up",
    "cta_href": "/signup",
    "ambient_glyph": true
  }
}

Props

Patterns

Top-of-page banner. Hero is the first child of NavShell. Set ambient_glyph: true to pick up the workspace brand mark automatically and anchor the page’s visual identity. Mid-page anchor. Drop a Hero block mid-tree to introduce a new content section — use a shorter headline, omit ambient_glyph, and skip the CTA so it doesn’t compete with the top-of-page banner. No-CTA variant. Omit both cta_label and cta_href when the Hero is purely introductory and conversion happens further down the page in a dedicated Cta block.

Common props

In addition to the Hero-specific props, every block accepts id, class_overrides, visible_if, and analytics_event. See common props on the PageBlocks overview.

Document model

Block types

Example

Props

Patterns

Common props

Where to go next

​Example

​Props

​Patterns

​Common props

​Where to go next

Example

Props

Patterns

Common props

Where to go next