Hero
Top-of-page block — flex column with optional center alignment.
The .hero primitive is the top block of a marketing page. Flex column, vertically rhythmed via marketing tokens. Skip the wrapping .page-section — heros sit at the top of the page, above sections.
Install
import "elements-kit/ui/styles.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/marketing/marketing.css";API
<section class="hero" data-align="center">
<h1 class="section-heading section-heading-1">Headline</h1>
<p class="section-paragraph">Subhead</p>
<a class="x-button" data-size="3" data-variant="solid" href="/start">Get started</a>
</section>| Attribute | Values |
|---|---|
data-align | start (default), center |
Compose with Section heading for the headline and Section paragraph for the subhead. Action buttons can be any <a class="x-button"> or <button class="x-button"> — see Button.
Do
Keep the heading to ≤ 2 lines on desktop. Paragraph ≤ 75ch.
Don't
Stack three CTAs side-by-side. Pick one primary plus an optional secondary link.
Don't
Wrap the hero in .page-section. The hero is meant to live at the top of the page, outside the section stack.