foundation

Hero

Page-opening hero with headline, optional subtext, up to 3 CTAs, and a background (light / alt / dark / full image / side image).

hero foundation

Keywords

hero, banner, header, intro

Metadata

Slughero

Categoryfoundation

Default containerstandard

Statuspublished

Variants

layout centred · left · split-image

background light · alt · dark · image

Fields (10)

Eyebrow text
Heading text
Subtext textarea
Call-to-actions repeater
Layout button_group
Side image image
Background button_group
Background image image
Overlay opacity range
Min height button_group

Use in a mockup

Copy this as the wrapper in your mockup's HTML — fill the inner markup per the Mockup Spec.

<section class="section hero"
         data-block="hero"
         data-surface="alt"
         data-layout="split-image"
                  data-container="standard">
  <div class="container container--standard">
    <div class="hero__inner">
      <!-- block content -->
    </div>
  </div>
</section>