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.
---
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