Hero Component Examples
This page demonstrates different ways to use the Hero component, including direct usage with props and data-driven usage with HeroLoader.
Example 1: Direct Component Usage
Using the Hero component directly with props:
With Lossless Components
Build Better Experiences
Our component library helps you create beautiful, accessible interfaces with minimal effort.
Example 2: Data-Driven Usage
Loading hero content from a JSON file with HeroLoader:
With Lossless Components
Build Better Experiences
Our component library helps you create beautiful, accessible interfaces with minimal effort.
Example 3: Alternative Style
Using a different background style and alignment:
For Modern Developers
Powerful Features
Take advantage of our cutting-edge tools to streamline your workflow and boost productivity.
Example 4: Custom Hero
A custom hero with glass background and centered alignment:
Flexible & Powerful
Customize Your Experience
The Hero component supports various styles, layouts, and content configurations to meet your specific needs.
Example 5: Glassmorphic Style (Direct)
A dark background with subtle gradient blob accents using direct component usage:
Subtle & Elegant
Modern Glassmorphic Design
This style uses a dark background with subtle gradient blobs to create depth and visual interest while maintaining readability.
Example 6: Glassmorphic Style (Data-Driven)
Loading a glassmorphic hero from JSON data:
Subtle & Elegant
Modern Glassmorphic Design
This style uses a dark background with subtle gradient blobs to create depth and visual interest while maintaining readability.
Example 7: Glassmorphic Vivid Style (Direct)
A dark background with more prominent gradient elements using direct component usage:
Bold & Striking
Vibrant Glassmorphic Design
This enhanced style combines our dark background with more prominent gradient elements for a bolder, more vibrant visual impact.
Example 8: Glassmorphic Vivid Style (Data-Driven)
Loading a vivid glassmorphic hero from JSON data:
Bold & Striking
Vibrant Glassmorphic Design
This enhanced style combines our dark background with more prominent gradient elements for a bolder, more vibrant visual impact.