Hero

The Hero component provides a full-width banner section typically used at the top of a webpage to showcase key content or imagery. It’s designed to be eye-catching and to establish the visual identity of the page.

Dependencies

None - this is a CSS-only component.

Usage

Basic Hero Section

<div class="hero">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing products and services</p>
    <button class="button">Learn More</button>
</div>

Hero with Background Image

<div class="hero" style="background-image: url('path/to/image.jpg');">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing products and services</p>
    <button class="button">Learn More</button>
</div>

Hero with Custom Colors

<div class="hero" style="--hero-background: #2196F3; --hero-color: #ffffff;">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing products and services</p>
    <button class="button">Learn More</button>
</div>

Features

• Full-width banner section for highlighting important content
• Support for background images
• Responsive padding that adjusts to screen size
• Customizable through CSS variables
• Simple implementation with minimal markup

Styling with CSS Variables

Variable	Default (Light)	Dark Mode	Description
--hero-background	#ffffff	#1e1f22	Background color of the hero section
--hero-color	#191919	#dbdfe7	Text color of the hero section

Example of Custom Styling

/* Custom styling for a specific hero section */
.custom-hero {
    --hero-background: linear-gradient(135deg, #667eea, #764ba2);
    --hero-color: #ffffff;
}

Available CSS Classes

Base Classes

• .hero - The main container class that applies all the hero styling

Responsive Behavior

The Hero component has the following responsive behavior:

Screen Size	Padding
Mobile (< 768px)	40px 20px
Desktop (≥ 768px)	160px 80px

Background Options

The Hero component supports various background options:

• Solid color (using the --hero-background variable)
• Background image (using the background-image property)
• Gradient (using the --hero-background variable with a CSS gradient)

When using a background image, the component automatically sets:

• background-position: center
• background-repeat: no-repeat
• background-size: cover

Common Use Cases

• Website homepage banner
• Section introductions
• Call-to-action areas
• Product showcases
• Event announcements