Skip to content

Hero

Where you can add it

Not in section groups: Header, Footer.

SettingTypeDefaultOptions and range
ImageImage—
EyebrowText—
HeadingTextCut for the cold months
TextText—
Solid button labelText—
Solid button linkLink—
Glass button labelText—
Glass button linkLink—
Product chip

A small card in the corner that links to the product shown in the photograph.

Product—
Product chip label

Shown when Product chip is set.

TextWorn here
Layout
HeightSelectFull screen
  • Small
  • Medium
  • Large
  • Full screen
Image darkening

Darkens the image so the text stays readable over it.

Range30 %0–70 %, step 5
Text on glass

Auto picks dark or light text for each glass element from the brightness of the photo behind it.

SelectAuto
  • Auto
  • Light
  • Dark
Motion
Reveal style

Set to None to show the finished hero without its opening animation.

SelectUse theme setting
  • Use theme setting
  • None
Opening capsule

The photograph opens from a capsule to the full frame once, when the page loads. Ignored when animation is off.

Shown when Reveal style is not None.

CheckboxOn
Parallax on scroll

The image drifts slower than the page and the text lifts away as you scroll. Ignored when animation is off.

CheckboxOn
Heading reveal

Shown when Reveal style is not None.

SelectWord by word
  • None
  • Word by word
Stagger

Shown when Reveal style is not None and Heading reveal is Word by word.

Range60 ms20–160 ms, step 5

Settings every section has — Layout, spacing, motion and visibility — the same in every section.

Not in this section: Stagger.

Defaults here: Section width Full width (everywhere else: Page width).

Here: Top spacing — Space between the edges of the image and the text.

Here: Bottom spacing — Space between the edges of the image and the text.

Section width: Shown when Shape is None.

  • Hero — Category: Banners
    Starts with: empty
  • Image banner — Category: Banners
    Starts with: empty