Product Hero Slider

Figma Component: 20721-109384

GitHub Issue: #36

Last modified with commit dcbd84b on March 4, 2026 at 11:04 PM by hip3r.

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 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
product-hero-slider-banner

Each hero slide can optionally include a banner object. When present, the slider renders the product-hero-slider-banner partial inside the banner slot.

Translated UI strings

The banner step labels and CTA label are translated via i18n:

higher-occupancy
higher-price
check-occupancy