Product Hero Slider
Figma Component: 20721-109384
GitHub Issue: #36
Last modified with commit 28c8a61 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 (numbered pagination) and arrow controls. |
| system | Auto-advance slides | Automatically progresses to next slide after set interval. The slide indicator loader progressively fills before transitioning to the next slide. |
| editor | Add and configure slides | Each slide requires image, optional heading, body text, and button with label and URL. Optionally, a slide may include a contingent banner area above the content. 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 |  |
Components
| Name | Description |
|---|---|
| contingent-banner |
Contingent Banner
Each hero slide can optionally include a contingent object. When present, the slider renders the contingent-banner partial inside the banner slot.