hero

Full-width hero section. Pass image HTML to activate the split layout — text on one side, image on the other. Use imageAlign to swap sides. Set align: 'left' for left-aligned text without an image. Use size: 'sm' for inner-page headers.

Now available

The app your phone deserves

Beautifully simple. Ridiculously fast. Available on iOS and Android.

Download on the App Store Get it on Google Play

hero({
  eyebrow:  'Now available',
  title:    'The app your phone deserves',
  subtitle: 'Beautifully simple. Ridiculously fast.',
  actions:  appBadge({ store: 'apple',  href: appStoreUrl }) +
            appBadge({ store: 'google', href: playStoreUrl }),
})

Split layout

Text left, image right

Pass an image slot to activate the split layout. The text sits on the left, image on the right.

Download on the App Store Get it on Google Play

hero({
  eyebrow:  'Split layout',
  title:    'Text left, image right',
  subtitle: 'Pass an image slot to activate the split layout.',
  actions:  appBadge({ store: 'apple',  href: appStoreUrl }) +
            appBadge({ store: 'google', href: playStoreUrl }),
  image:    `<img src="${screenshotUrl}" alt="Product screenshot">`,
})

Split layout

Image left, text right

Set imageAlign: 'left' to put the image on the left and text on the right.

hero({
  eyebrow:    'Split layout',
  title:      'Image left, text right',
  subtitle:   'Set imageAlign to swap sides.',
  image:      `<img src="${screenshotUrl}" alt="Product screenshot">`,
  imageAlign: 'left',
})

Purple (default)

gradient: true

Blue

gradient: 'blue'

Green

gradient: 'green'

Rose

gradient: 'rose'

Orange

gradient: 'orange'

hero({ title: 'Headline', gradient: 'purple' })  // or 'blue' | 'green' | 'rose' | 'orange'

Solid colour

background: color

Custom gradient

background: CSS gradient

// Any valid CSS background value
hero({ title: 'Headline', background: '#0f172a' })
hero({ title: 'Headline', background: 'linear-gradient(135deg, #1e1b4b, #312e81)' })

Blog

Thoughts on building for the web.

hero({
  title:    'Blog',
  subtitle: 'Thoughts on building for the web.',
  size:     'sm',
})

Prop	Type	Default	Description
`eyebrow`	string	—	Small label above the title
`title`	string	—
`subtitle`	string	—
`actions`	string (HTML)	—	Raw HTML slot — buttons, badges, etc.
`image`	string (HTML)	—	Raw HTML slot — activates split layout when set
`imageAlign`	string	'right'	'right' (text left) or 'left' (text right) — only applies when image is set
`align`	string	'center'	'center' or 'left' — text alignment when no image
`size`	string	'md'	'md' (5rem padding) or 'sm' (2.5rem top, no bottom) — use sm for inner-page headers
`gradient`	boolean \| 'purple' \| 'blue' \| 'green' \| 'rose' \| 'orange'	false	Named gradient preset. true and 'purple' are identical.
`background`	string	—	Any CSS background value — solid colour or custom gradient. Overrides gradient preset.