Logo links marquee
BlockA heading over an endless row of large, linked logos that pop in one after another and tilt on hover, with a pause control.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add logo-links-marqueeimport { DEFAULT } from "@/components/blocks/logo-links-marquee"; export default function Page() { return <DEFAULT />;}<LogoLinksMarqueeBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Join thousands of developers and designers already building with us." |
heading | ReactNode | "Trusted by the world's most innovative teams" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
labelsText of the pause control in each state. | Partial<LogoLinksMarqueeLabels> | — |
logos | LogoLinksMarqueeLogo[] | DEFAULT_MARQUEE_LINKS |
speedScroll speed in pixels per second. | number | 40 |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`). The row is Marquee, so each logo link exists once for assistive technology and the keyboard — the copies that close the loop are aria-hidden and inert — and it pauses on hover and focus. A visible Pause button stops it outright (WCAG 2.2.2); under reduced motion the row stops and becomes a scrollable region, and the button is hidden because there is nothing to pause. Each entry is named by its organisation; the graphic is aria-hidden.