Sub Page Hero
Figma Component: 22271-176579
Last modified with commit 0a12b72 on
by Sara Deric.
The Sub Page Hero Section displays a hero banner at the top of subpages with breadcrumb navigation and large heading text. Features full-width background image with gradient overlay and centered text card with brand-colored bottom border.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display hero background | Shows full-width background image with dark-to-transparent gradient overlay covering entire hero section. |
| system | Display text card | Shows centered card with black background, brand-colored bottom border, breadcrumb navigation, and heading text. |
| editor | Add background image | Upload image that displays as full-width background. |
| editor | Add breadcrumb navigation | Configure breadcrumb items. Home link is included by default, followed by current page name. |
| editor | Add heading text | Text field for main hero heading matching page title. |
| user | Click breadcrumb link | Navigates to linked page. Link shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |