Image or Video Hero
Figma Component: 25865-227936
GitHub Issue: #275
Full-width hero section with an image or video background, a dark gradient overlay, heading, and primary/secondary buttons. Optionally shows a segment card in the top-right corner linking to another page.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display background media | Shows a full-width image or video filling the hero, with a dark gradient overlay. |
| system | Display heading and buttons | Shows heading text and up to two buttons (primary filled, secondary outlined with an arrow icon) anchored to the bottom-left of the hero. |
| system | Display segment card | Shows an optional card in the top-right corner with a small thumbnail image, a short message, and an arrow icon. Links to another page. |
| system | Stack on mobile | Content reflows to fit narrower widths; buttons wrap to a new row if needed. |
| editor | Configure background media | Set an image or a video as the hero background. |
| editor | Configure heading and buttons | Set heading text, and optionally a primary button (text, URL) and secondary button (text, URL). |
| editor | Configure segment card | Optionally set a thumbnail image, message text, and destination URL for the segment card. |
| user | View hero | Reads heading and view background media. |
| user | Click buttons | Clicks primary or secondary button to navigate. |
| user | Click segment card | Clicks the segment card to navigate to the linked page. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |