Slider
Hero Slider
A flexible hero that works as a static block or an interactive slider with full-width backgrounds.
Overview
HeroSlider is the flexible hero component. It works as a static hero block when there's only one slide, or as an interactive slider when there are multiple. Each HeroSlide carries its own media (separate mobile and desktop images), copy, and up to two CTA buttons, with a gradient or full-color overlay at adjustable opacity.
Each slide's chrome and text colors stay legible against its background via an <OnSurface :tone="activeSlideTone"> wrapper that tracks the active slide.
Key Business & UX Benefits
- The hero slot drives top-of-funnel attention, and this component covers both single-message heroes and multi-message rotations from one config.
- Separate mobile and desktop images per slide remove the cropping compromises that hurt mobile conversion on hero placements.
- Per-slide tone tracking keeps headlines and buttons legible against every background, eliminating the "white text on snow" failure.
- Up to two CTAs per slide support layered narratives ("shop the drop" plus "learn more"), giving editors finer control over the customer journey.
Pro-Tip from Larry: Use the
<OnSurface> wrapper so each slide's chrome and text colors stay legible against its background.Usage
Hero Slider Default
Feature List
- Works as a static hero with one slide or an interactive slider when multiple HeroSlides are present
- Separate mobile and desktop images per slide remove cropping compromises on hero placements
- Up to two CTA buttons per slide support layered narratives like 'shop the drop' plus 'learn more'
- Gradient or full-color overlays at adjustable opacity keep headlines readable over any background
- Per-slide tone tracking via <OnSurface :tone='activeSlideTone'> keeps chrome legible against each background
- Editors swap slides, media, and CTAs in Studio so seasonal heroes ship without engineering
API Reference
LHeroSlider
| Prop | Default | Type |
|---|---|---|
slidesrequired | (HeroSlideProps & { id?: string | undefined; })[] { backgroundFallbackColor, backgroundMedia, surfaceTone, 15 more } | |
fullHeight | false | boolean |
isAboveTheFold | false | boolean |
autoplay | false | boolean |
autoplayDelay | 5000 | number |
LHeroSlide
| Prop | Default | Type |
|---|---|---|
backgroundFallbackColor | UserColor { dark, light } | |
backgroundMedia | ||
surfaceTone | dark | SurfaceTone ("light" | "dark" | "bright") |
overlay | ImageContrastOverlayProps { variant, opacity } | |
heading | string | |
headingVisible | true | boolean |
headingStyle | { color } | |
sublineStyle | { color } | |
subline | string | |
alignmentMobile | bottom-left | "top-center" | "top-left" | "top-right" | "center-center" | "center-left" | "center-right" | "bottom-center" | "bottom-left" | "bottom-right" |
alignmentDesktop | bottom-left | "top-center" | "top-left" | "top-right" | "center-center" | "center-left" | "center-right" | "bottom-center" | "bottom-left" | "bottom-right" |
textAlignmentMobile | left | ContentAlignmentHorizontalFieldValue ("center" | "left" | "right") |
textAlignmentDesktop | left | ContentAlignmentHorizontalFieldValue ("center" | "left" | "right") |
flags | CaptionFlagProps[] { text, colorScheme, variant } | |
ctas | CtaBannerButton[] { text, link, size, 3 more } | |
isAboveTheFold | false | boolean |
sizing | fill | "keep-ratio" | "fill" |