Product Hero
Figma Component: 22864-853679
Last modified with commit 062d974 on
by Sara Deric.
The Product Hero component displays a hero section for product or experience detail pages. Features large image with product title, key information, and booking call-to-action.
*Note: Design version has been updated in Figma. Need to verify with Damir which version is correct. TBD
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 | Editor can manually add all content including product title, description, primary image, additional images (optional), key details (dates, location, duration), and booking button label with URL. |
| user | Click booking button | Navigates to booking page or form. Button shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |