Product Hero Slider
Figma Component: tbd
Last modified with commit 74094e5 on
by Martin Jagodic.
The Product Hero Slider displays a rotating carousel of hero images or content at the top of product pages. Features navigation controls and automatic progression through slides.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display slider content | Shows hero slides with automatic rotation. Displays navigation dots and arrow controls. |
| system | Auto-advance slides | Automatically progresses to next slide after set interval. |
| editor | Add and configure slides | Each slide requires image, optional heading, body text, and button with label and URL. Slides can be reordered. |
| user | Navigate slides | Click navigation arrows or dots to view specific slide. Hover pauses auto-rotation. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop | ![]() |
| Mobile | ![]() |
Type (Variant)
| Value | Example |
|---|---|
| Collegium Experience | ![]() |
| Mondial Destination | ![]() |


