Slider
Logo Slider
Animated slider of brand, partner, or supplier logos.
Overview
LogoSlider is the animated logo slider for "trusted by", "as seen in", certification, and supplier rows. Each logo carries its own title, optional link, and image. The slider-level logoBackground prop sets a shared backdrop color that applies to every logo slide, so the strip stays visually unified. The slider includes navigation controls and an optional scrollbar.
Pair with LogoGrid, the static-grid variant. Both share the same slides shape, so layouts are interchangeable: reach for LogoSlider when you have many logos, and LogoGrid for short, fixed lists.
Key Business & UX Benefits
- Long partner and certification lists stay viewable without dominating the page, keeping trust signals present at any scroll depth.
- A shared
logoBackgroundkeeps every logo on the same backdrop tone, so the strip reads as one unified trust band. - Optional links turn the trust strip into a navigation channel for partner directories and certification details.
- Studio edits keep the rotation current as partnerships, certifications, or press coverage evolve.
Pro-Tip from Larry: Use
LogoSlider when you have many logos that wouldn't fit a static grid; switch to LogoGrid for short, fixed lists.Usage
LLogoSlider
Feature List
- Each logo carries its own title, optional link, and image
- Slider-level logoBackground prop applies one shared backdrop color across every logo slide
- Navigation controls and an optional scrollbar handle long lists that wouldn't fit a static grid
- Optional per-logo links turn the trust strip into a navigation channel for partner directories
- Shares the slides shape with LogoGrid so layouts are interchangeable as the list grows
- Editors keep partnerships, certifications, and press coverage current in Studio
API Reference
LLogoSlider
| Prop | Default | Type |
|---|---|---|
slidesrequired | LogoSliderSlideProps[] { title, href, logo, 1 more } | |
caption | string | |
captionColor | string | |
heading | string | |
headingColor | string | |
subline | string | |
sublineColor | string | |
orientation | center | "center" | "left" |
textSize | m | "s" | "m" | "l" |
rows | one | "one" | "two" |
navigationPosition | unset | "top" | "bottom" | "unset" |
logoBackground | string |
LLogoSliderSlide
| Prop | Default | Type |
|---|---|---|
title | string | |
href | string | |
logo | toMedia("/placeholders/16x9.jpg", 250, 139) | MediaImage { type, sources, placeholder, 2 more } |
logoBackground | string |