Logo marquee
BlockA heading over a quiet, dimmed marquee of logos with a named speed, a direction and a pause control.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add logo-marqueeimport { DEFAULT } from "@/components/blocks/logo-marquee"; export default function Page() { return <DEFAULT />;}<LogoMarqueeBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Join thousands of companies already using our platform" |
heading | ReactNode | "Trusted by industry leaders" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
labelsText of the pause control in each state. | Partial<LogoMarqueeLabels> | — |
logos | LogoMarqueeLogo[] | DEFAULT_MARQUEE_LOGOS |
pauseOnHoverPauses while hovered or while focus is inside. | boolean | true |
reverseRuns toward the inline end instead of the start. | boolean | false |
speed | keyof typeof SPEEDS | "normal" |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`). Built on Marquee: each logo exists once for assistive technology and the keyboard, the row pauses on hover and focus, runs mirrored on right-to-left pages, and stops under reduced motion. A visible Pause button stops it outright (WCAG 2.2.2). Each entry is named by its organisation; the graphic is aria-hidden, and focus brightens an entry as hover does.