Uilora Hero Feature
Split hero feature section with gradient headline, CTA buttons, and 3 staggered feature cards — each with a pastel dot-grid background, iOS-style gradient icon, title and description.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Build faster: ship with an all-in-one library. | Main headline. The phrase 'all-in-one' is automatically rendered in a gradient — include it in your title string to activate the effect. |
| description | string | Production-ready component library. Ship beautiful, accessible UIs instantly with Uilora's 700+ components. | Subtitle displayed below the headline. |
| accentColor | string | #f472b6 | Hex color for the gradient on 'all-in-one', the badge icon, the stat card, and CTA button hover. |
When to Use
Perfect for SaaS landing pages, component library homepages, and product hero sections that need to communicate value immediately. The 3-card stagger creates visual hierarchy without a complex layout.
Best Practices
Include 'all-in-one' in your title string to activate the gradient effect. Pink-to-orange or purple-to-pink accent colors work best against the white card background. Keep the description under 2 lines for the cleanest layout.
Why This Component Matters
The combination of a bold gradient headline, clear CTAs, and three feature cards gives users everything they need to understand the product — immediately. The iOS-style icons add a polished, premium feel without image dependencies.
FAQ
QHow does the gradient on 'all-in-one' work?
The title string is split on the literal text 'all-in-one'. The middle part is wrapped in a span with background-clip: text and the accentColor gradient. Change the gradientWord const in the component to use a different highlighted word.
QCan I change the feature cards?
The three cards (Components, Design System, Developer DX) and their dot-grid patterns are hardcoded. Clone the component and edit the card content and cardNSpots arrays to customize.
QWhy does the middle card extend above the others?
It uses marginTop: -32px and height: calc(100% + 32px) to create the staggered height effect. Adjust these values to change the offset.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.