Skip to content
Aback UI

Block ยท Marketing

Hero

A landing-page opening with announcement, h1, highlight line, actions, proof points, and an aside.

Beta1 componentRegistry JSON (opens in a new tab)
the Hero preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add hero

The block lands at components/blocks/hero.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • The hero renders the page's h1. Use it once, at the top of a landing page.
  • highlight is the second line of the same h1 in the link colour. Do not use gradient text; it fails contrast and the design system bans it.
  • Only claim highlights you can back up. The preview's numbers are labelled example data; pass real figures from your server.
  • Put a product shot, a live stat panel, or a demo in aside. It moves below the actions on narrow screens.

Accessibility

  • The section is labelled by the h1, and the announcement is an ordinary link with descriptive text.
  • The primary action is a link styled as a button because it navigates. Use a real button only for an in-page action.
  • Proof points are a list with decorative check icons.
  • The arrow nudge stops under prefers-reduced-motion.