Top-of-page headline, value prop, and CTA.

Overview

Hero Section is a flexible block component for creating impactful hero sections with title, description, and call-to-action buttons. Supports gradient backgrounds, image backgrounds, and multiple CTA variants.

1
2
3
4
5
6
7
8

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13

Props

• title - Hero title (required)
• description - Hero description (optional)
• primaryCTA - Primary call-to-action button (optional)
• secondaryCTA - Secondary call-to-action button (optional)
• background - Background type: "gradient" | "image" | "solid" (optional, default: "solid")
• image - Background image object with src and alt (optional)
• className - Additional CSS classes (optional)

HeroCTA

• label - Button label (required)
• href - Link URL (optional)
• onClick - Click handler (optional)
• variant - Button variant: "solid" | "outline" | "ghost" (optional)
• action - Action identifier for analytics (optional)

Install

1

Accessibility

Hero section uses semantic HTML with proper heading hierarchy. CTA buttons are keyboard accessible and follow button/link accessibility patterns. Background images include proper alt text. Compliant with WCAG 2.1.