Hero is a flexible section component for creating prominent page banners and headers. It supports overlays and content positioning using the HeroContent and HeroOverlay subcomponents.
A simple Hero section with centered content and a call to action.
The Hero components include the following:
The Hero component serves as the main wrapper for hero sections. Its is prop controls the rendered element (default: div).
| Hero Props | Type | Description |
|---|---|---|
is | string | Sets the HTML element to render. Default is |
| Hero Slots | Description |
|---|---|
default | The default slot. Place |
The HeroContent component positions and styles the content inside a hero section. Its is prop controls the rendered element (default: div).
| HeroContent Props | Type | Description |
|---|---|---|
is | string | Sets the HTML element to render. Default is |
| HeroContent Slots | Description |
|---|---|
default | The content to display inside the hero section. |
The HeroOverlay component provides an overlay layer for background effects in hero sections. Place it as a child of Hero.
| HeroOverlay Slots | Description |
|---|---|
default | Content to display inside the overlay (optional; typically left empty for visual effects only). |
A Hero section with an image and content side-by-side.
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
A Hero section with a login form and descriptive content.
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
A Hero section with a background image and overlay for visual effect.
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.