Back to site

Hero Split

Prominent section block for landing pages.

Cliffs and rugged coastline near Dunedin, New Zealand, with yellow flowering shrubs in the foreground and waves crashing against the rocks below.

Destination guide

Discover Dunedin

A city of students, heritage, and natural wonder at the edge of the Pacific.

Explore Dunedin Learn More 
---
import Button from "@core-elements/button/Button.astro";
import HeroSplit from "@page-sections/heroes/hero-split/HeroSplit.astro";
---

<HeroSplit
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Explore Dunedin",
      "variant": "primary",
      "size": "md",
      "link": "/about"
    },
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Learn More",
      "variant": "secondary",
      "size": "md",
      "link": "/learn"
    }
  ]
} eyebrow="Destination guide" heading="Discover Dunedin" imageAlt="Cliffs and rugged coastline near Dunedin, New Zealand, with yellow flowering shrubs in the foreground and waves crashing against the rocks below." imageSource="/src/assets/images/component-library/dunedin-cliff.jpg" reverse subtext="A city of students, heritage, and natural wonder at the edge of the Pacific."
/>
---
blocks:
  _component: page-sections/heroes/hero-split
  eyebrow: Destination guide
  heading: Discover Dunedin
  subtext: A city of students, heritage, and natural wonder at the edge of the Pacific.
  reverse: true
  imageSource: /src/assets/images/component-library/dunedin-cliff.jpg
  imageAlt: Cliffs and rugged coastline near Dunedin, New Zealand, with yellow flowering shrubs in the foreground and waves crashing against the rocks below.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Explore Dunedin
      variant: primary
      size: md
      link: /about
    - _component: building-blocks/core-elements/button
      text: Learn More
      variant: secondary
      size: md
      link: /learn
---

Overview

A prominent section block for landing pages. Combines an optional eyebrow, large heading, subtext, call-to-action buttons, and feature image in a responsive split layout, with configurable colorScheme/backgroundColor treatment.

Properties

eyebrow string | default: Eyebrow text

Optional label displayed above the hero heading.

heading string | default: Heading text

Main heading text for the hero section.

subtext string | default: Subtitle placeholder text that will be replaced with actual content.

Subtitle text displayed below the main heading.

imageSource string | default: /src/assets/images/component-library/dunedin-cliff.jpg

Feature image to display alongside the hero content.

imageAlt string | default: Hero image

Alt text for the feature image for accessibility.

imageAspectRatio enum | default: none

Set a fixed aspect ratio for the image.

Accepted values:
  • none
  • square
  • landscape
  • portrait
  • widescreen

buttonSections array | default: array

Array of button components for call-to-action buttons. See the Button component documentation for more information.

reverse boolean | default: false

Whether to reverse the order of content and image (image first, content second).

colorScheme enum | default: inherit

Color scheme theme for the hero.

Accepted values:
  • inherit
  • default
  • contrast

backgroundColor enum | default: base

Background color for the hero.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight