Skip to content
ElementsKit

Hero

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/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/space.css";
import "elements-kit/ui/styles/typography.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>
AttributeValues
data-alignstart (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.