Hero Section

The Hero section component creates visually striking page headers with support for background images, breadcrumb navigation, and flexible content layouts. Perfect for landing pages, article headers, and key content sections.

Overview

Hero sections are designed to be:

• Impactful: Full-width design with optional background images
• Flexible: Supports various content types and layouts
• Responsive: Adapts seamlessly across all device sizes
• Accessible: Built with semantic HTML and proper image handling

Basic Usage

1
<Hero>
2
  Welcome to Our Site
3
  <Fragment slot="subtitle"> Discover amazing content and features </Fragment>
4
</Hero>

Features

Background Images

Add visual impact with optimized background images:

1
<Hero
2
  image={{
3
    file: import('@/assets/images/hero.jpg'),
4
    alt: 'Mountain landscape',
5
    quality: 'high',
6
    class: 'bg-gradient-to-b from-primary/20',
7
  }}
8
>
9
  Featured Content
10
</Hero>

Breadcrumb Navigation

Enable contextual navigation with built-in breadcrumbs:

1
<Hero
2
  pathname="/docs/components/hero"
3
  breadcrumb={{
4
    show: true,
5
    showHome: true,
6
    removePaths: ['docs'],
7
  }}
8
>
9
  Documentation
10
</Hero>

Publication Dates

Display timestamps for content:

1
<Hero date={new Date('2024-03-01')}> Latest Updates </Hero>

Props API

Slots

Image Optimization

The Hero component automatically handles image optimization with:

• Responsive image sizes
• Lazy loading
• Multiple width variants
• Quality presets
• Priority loading for above-the-fold content

Best Practices

1. Content Guidelines

   • Keep headings concise and impactful
   • Use subtitles to provide context
   • Ensure text remains readable over background images
   • Maintain consistent tone across hero sections

2. Image Usage

   • Optimize images for web performance
   • Choose images that don’t interfere with text readability
   • Consider mobile viewing experience
   • Use appropriate quality settings for your needs

3. Layout Considerations

   • Maintain adequate spacing around content
   • Ensure proper contrast for text
   • Consider viewport heights on different devices
   • Test breadcrumb visibility with different backgrounds

Common Applications

• Landing page headers
• Article introductions
• Section breaks
• Feature showcases
• Product presentations
• Category headers
• Portfolio items
• Blog post headers

Responsive Behavior

The Hero section automatically adjusts:

• Font sizes across breakpoints
• Padding and margins
• Image scaling and cropping
• Content layout and spacing

Related Components

• Banner - For announcements and notifications
• Header - For site-wide navigation
• Card - For featured content blocks
• Image - For standalone image display