Back to site

Hero Center

Centered hero with heading, supporting text, and buttons.

New release

Activate Your Community

Launch pages faster with centered hero layouts that keep copy tight and focused.

Get Started 
---
import Button from "@core-elements/button/Button.astro";
import HeroCenter from "@page-sections/heroes/hero-center/HeroCenter.astro";
---

<HeroCenter
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Get Started",
      "variant": "primary",
      "size": "md",
      "link": "/start"
    }
  ]
} eyebrow="New release" heading="Activate Your Community" subtext="Launch pages faster with centered hero layouts that keep copy tight and focused."
/>
---
blocks:
  _component: page-sections/heroes/hero-center
  eyebrow: New release
  heading: Activate Your Community
  subtext: Launch pages faster with centered hero layouts that keep copy tight and focused.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Get Started
      variant: primary
      size: md
      link: /start
---

Overview

Pairs a label/eyebrow, large heading, and supporting text in the middle of the layout, keeping CTAs stacked underneath for quick landing pages, and now supports colorScheme/backgroundColor props for theme alignment.

Properties

eyebrow string | default: Eyebrow text

Optional label displayed above the hero heading.

heading string | default: Heading text

Main heading text for the hero.

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

Supporting subtext displayed beneath the heading.

buttonSections array | default: array

Button blocks for calls to action.

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

backgroundImage object

Background image configuration for the hero.

Properties:

source string

URL or path to the background image.

alt string

Alt text for the background image.

positionVertical enum

Vertical position of the background image.

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal position of the background image.

Accepted values:
  • left
  • center
  • right

overlay enum | default: none

Overlay applied over the background image for text readability.

Accepted values:
  • none
  • light
  • dark