Skip to content

Hero

The opening section of a website page: a big headline, a sentence and what to do next, over a moving decoration in the brand's colours. Follows the page's light or dark scheme, or stays dark with scheme="dark". Styles: aurora, orbit, gallery, cards.

alphaSource

Installation

pnpm add @syntara/react @syntara/tokens
import { Hero } from '@syntara/react';

Usage

import { Button, Eyebrow, Hero } from '@syntara/react';

export function Landing() {
  return (
    <Hero
      eyebrow={<Eyebrow>New: one wallet for every claim</Eyebrow>}
      title="Health cover that pays"
      titleSecondary="before you do"
      description="Book a consult, pay at the pharmacy and claim lab tests from one app."
      actions={<Button size="lg">Get started</Button>}
    />
  );
}

Examples

Aurora

variant="aurora" (the default): soft lights in the brand's colours drift behind centred text. Eyebrow, a two-tone headline, a sentence and two buttons.

New: one wallet for every claim

Health cover that pays before you do

Book a consult, pay at the pharmacy and claim lab tests from one app, with cashless care at partner clinics.

Orbit

variant="orbit": the copy on the start side; rings of the brand colour ripple out around the actions, which become a white pill.

Money that moves at your pace

Save, spend and invest from one account, with every rupee where you can see it.

Gallery

variant="gallery": your images on a slowly turning wall between the headline and the description. Two cards are brand-colour tiles.

Every idea, one canvas

Collect references, sketch with your team and ship the version everyone agreed on.

Card fan

variant="cards": centred copy over a fan of up to five cards on solved brand colours, with name-tagged cursors drifting beside the headline. Hover the fan to spread it.

NewShared boards for every team

Plan it together ship it on time

One workspace for briefs, budgets and approvals, so nothing waits in someone’s inbox.

With a search

actions takes anything: here a search field and its button.

Find care near you

Clinics, labs and pharmacies that take your plan, cashless.

Always dark

scheme="dark" keeps the brand's dark colours, so the lights glow even on a light page.

Every brand, one system

Six inputs become a light and a dark theme that pass WCAG 2.2 AA.

Accessibility

KeysAction
SpaceorEnterOn the pause toggle, pauses or resumes the lights.
  • A section named by its headline (aria-labelledby).
  • WCAG 2.2.2: the lights loop slowly, so a pause toggle with a fixed name and aria-pressed is always shown. With reduced motion, nothing moves and the toggle is removed.
  • The decoration is aria-hidden. In light, the copy and the pause toggle sit on a halo of the page colour (90%, blurred at the copy's edge so it never reads as a box), so text.default and text.subtle stay at 4.5:1 over all four lights at full strength, for every tenant and 1,000 fuzz brands (hero.test.tsx; ADR-046). With scheme="dark", text and buttons use the brand's dark roles.
  • Two headline lines are read with a space between them.
  • orbit: the rings and stars are aria-hidden; the actions follow the copy in reading order. Buttons at the centre are a white pill: the scheme's lightest text-safe pair (16.8:1 measured on Vela).

Guidelines

Do

  • Use one Hero per page, at the top.
  • Keep the headline to two short lines.

Don’t

  • Don't put more than two buttons in actions.
  • Don't place text over the lights outside the Hero's own copy.

API reference

Hero

titleRequired
ReactNode

The headline.

titleSecondary
ReactNode

A second headline line in the muted text colour.

description
ReactNode

One or two sentences under the headline.

eyebrow
ReactNode

A small line above the headline, such as an Eyebrow or a "what's new" Badge and Link.

actions
ReactNode

Buttons, a search field or chips. At most two buttons reads best.

variant
  • auroradefault
  • orbit
  • gallery
  • cards

aurora: soft lights drift behind centred text. orbit: text on the start side, rings of the brand colour around the actions on the far side. gallery and cards follow (RFC-003).

images
Array<{ src: string }>

Pictures for variant="gallery", used in order and repeated to fill 20 cards. Decorative: no alt text.

cards
Array<{ title: string; meta?: string; image?: string }>

Up to five cards for variant="cards", fanned out from the middle, each on a different solved brand colour pair. Decorative.

cursors
string[]

Up to two names on cursors that drift beside the headline (variant="cards", wide screens).

scheme
  • dark
  • inheritdefault

inherit: follow the page's light or dark scheme; in light the lights glow around the copy, which sits on a halo of the page colour. dark: always the brand's dark colours, so the lights glow even on a light page.

theme
string

With scheme="dark": the tenant id, so the hero renders dark on the server. Otherwise it's copied from the nearest themed ancestor.

headingLevel
1 | 2 | 3 | 4

Level of the headline. Use 2 or lower for a hero inside a longer page.

Default 1

pauseLabel
string

Accessible name of the pause toggle.

Default 'Pause animation'

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour6
surface.canvastext.defaulttext.subtleaction.primary.bgaccent.bgfocus.ring
Type6
font.headingfont.size.4xlfont.size.5xlfont.size.6xlfont.size.lgline-height.tight
Space and size3
space.16space.20control.height
Shape1
radius.button
Motion1
motion.duration.slow