Loading...
Loading...
The SectionHeader component provides consistent section titles and descriptions across all content types. Supports optional subtitles, action links, and flexible alignment.
Standard section header with premium typography and proper spacing.
These experiences reveal the city's authentic character and cultural heritage
Include a "View All" or similar action link with smooth transitions.
Stay updated with our newest stories and guides from across Italy
Center-aligned header for featured sections with optimal subtitle width.
From the rolling hills of Tuscany to the dramatic coastlines of the Amalfi Coast
Right-aligned header for special layouts.
Handpicked stories and experiences
Larger heading for hero sections and featured content areas.
Discover the finest Italian traditions and craftsmanship
Compact header for nested sections or sidebar content.
More stories you might enjoy
Add a subtle decorative accent line above the header for visual interest.
Curated selections from our editorial team
Centered header with decorative accent line.
Explore Italy's most beautiful regions and cities
Use a custom ReactNode for the action instead of ActionLinkProps.
Exclusive content for members
Simple header with just a title, no subtitle needed.
Showcasing all features together: large size, accent, centered, with action.
A curated selection of Italy's finest experiences, artisans, and destinations
import { SectionHeader } from '@/components/composite/SectionHeader';
// Basic header
<SectionHeader
title="Essential Experiences"
subtitle="These experiences reveal the city's authentic character"
/>
// With action link
<SectionHeader
title="Latest Articles"
subtitle="Stay updated with our newest stories"
action={{ text: "View All Articles", href: "/articles" }}
/>
// Large size with accent
<SectionHeader
title="Featured Content"
subtitle="Curated selections from our team"
size="large"
showAccent
align="center"
/>
// Small size for compact sections
<SectionHeader
title="Related Articles"
subtitle="More stories you might enjoy"
size="small"
action={{ text: "View All", href: "/articles" }}
/>
// With custom action (ReactNode)
<SectionHeader
title="Special Collection"
action={<CustomButton />}
/>