Heroes
Hero sections for landing pages and key content areas.
Default Hero
Simple hero with title, description, and call-to-action buttons.
Welcome
Build Something Amazing
Start creating beautiful, responsive websites with our design system. Everything you need to build modern web experiences.
Centered Hero
Centered layout for impactful messaging.
Introducing v2.0
The Future of Design
Create stunning interfaces with our comprehensive component library.
Split Hero
Two-column layout with content and image.
Design System
Design with Confidence
Our design system provides all the tools you need to create consistent, beautiful user interfaces.
Hero Heights
Control the minimum height of the hero section.
Medium Height
Medium Height Hero
This hero has a minimum height of 60vh.
Overlay Hero
Hero with background image and dark overlay.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Hero headline (required) |
description | string | — | Supporting text |
eyebrow | string | — | Small text above title |
variant | 'default' | 'centered' | 'split' | 'overlay' | 'default' | Layout variant |
height | 'auto' | 'medium' | 'full' | 'auto' | Minimum height |
image | string | — | Side image for split layout |
backgroundImage | string | — | Background image URL |