Appearance
Hero Element
Provides a full-width responsive container for a hero image, tagline, and feature articles
Usage
Basic Usage
html
<content-hero>
</content-hero>CSS Parts
| Name | Description |
|---|---|
container | Overall responsive container section element |
CSS Variables
| Name | Description | Type | Default |
|---|---|---|---|
--container-borderColor | Bottom border color of hero section | color |
|
--container-textColor | Foreground text color of tagline text | color |
|
--container-bgColor | Primary background color, used as fallback to gradient | color |
|
--gradient-fromColor | Primary color used in background gradient | color |
|
--gradient-midColor | Secondary color used in background gradient | color |
|
--gradient-toColor | Final color used in background gradient | color |
|
Slots
| Name | Description | Type |
|---|---|---|
| none | Text to show alongside hero image and feature content | p |
title | Hidden title of the hero section | <h3> |
image | Image or other content to show in the hero section | <img> | * |
feature | Articles to feature alongside hero image and tagline | * |