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.