Hero

Full-bleed image with eyebrow, heading, lead and up to two actions; wrap one heading word in *asterisks* to emphasise it.

Content

Pack defaults

With content

In context

Source

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

const props = {
  "src": "",
  "alt": "",
  "eyebrow": "",
  "heading": "Objects for quiet work",
  "lead": "",
  "primaryLabel": "",
  "primaryHref": "#",
  "secondaryLabel": "",
  "secondaryHref": "#",
  "variant": "display"
};
<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; } */