Hero

Display heading, lead and two actions beside the product screenshot.

Marketing

Pack defaults

With content

In context

Source

import { Hero } from "demo-landing/components";

const props = {
  "eyebrow": "Team scheduling",
  "heading": "Every moving part of your week, in one view",
  "emphasis": "one view",
  "lead": "Orrery puts your team's meetings, focus time and deadlines on one calendar, so planning the week takes minutes.",
  "primaryLabel": "Start free",
  "primaryHref": "#signup",
  "secondaryLabel": "See pricing",
  "secondaryHref": "/pricing",
  "src": "",
  "alt": "Stylised calendar app window with a week grid and one highlighted block"
};
<Hero {...props} />

Live CSS

Injected into the previews above. Hero

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */