hero

Full-width hero section. The actions slot accepts any combination of button() and appBadge() calls. Set align: 'left' for a split-layout hero. Use size: 'sm' for inner-page headers that don't need the full vertical padding.

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 }),
})

Blog

Thoughts on building for the web.

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

Prop	Type	Default
`eyebrow`	string	—	Small label above the title
`title`	string	—
`subtitle`	string	—
`actions`	string (HTML)	—	Raw HTML slot
`align`	string	'center'	'center' or 'left'
`size`	string	'md'	'md' (5rem padding) or 'sm' (2.5rem top, no bottom) — use sm for inner-page headers