Product Hero
Figma Component: tbd
Last modified with commit 74094e5 on
by Martin Jagodic.
The Product Hero component displays a hero section for product or experience detail pages. Features large image or image gallery with product title, key information, and booking call-to-action.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display hero content | Shows product image or image gallery, product title, brief description, key details (dates, location, duration), and primary booking button. |
| system | Display image gallery | When multiple images present, shows image gallery with navigation controls. Single image displays without gallery controls. |
| editor | Add hero content | Product title, description, and primary image required. Additional images optional. Booking button label and URL required. |
| user | Navigate image gallery | Click navigation controls to view additional images when gallery present. |
| user | Click booking button | Navigates to booking page or form. Button shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |