Two rows of stories scrolling in opposite directions — quotes, results in numbers and posts on inset cards — that stop under the pointer; each opens its case study.
When to use
- Two rows of stories scrolling in opposite directions: quotes, results and posts.
- Home pages with a lot of praise to show at once.
When not to use
- A handful of quotes: they'd repeat as it scrolls; Testimonials grid.
- Quotes people should read one by one: they move; Testimonials grid holds still.
Usage
Marquee wall with your own data: every prop has the sample as its default, so pass only what you have.
import { MarqueeWall } from "@/components/dashral/blocks/marquee-wall"
<MarqueeWall
rating={{ score: 4.9, label: "from 1,200 reviews" }}
stories={stories}
logos={customerLogos}
/>API reference
MarqueeWall
Testimonials as a wall that moves: two rows of cards scrolling in opposite directions — quotes, results in numbers and posts — on inset cards with each company on the frame. A row stops under the pointer; a card opens its story: the challenge, the results and the person. Above, the rating and the logos. Every part comes from props.
| Prop | Type | Default |
|---|---|---|
rating | { score: number; label: string } | nullThe pill above the heading; null hides it. | sample |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
logos | React.ReactNode[]The companies under the heading: names, or logos of their own; none hides the row. | sample |
stories | Story[] | sample |
more | { label: string; href: string } | nullThe button under the wall; null hides it. | sample |
type Story
| Prop | Type | Default |
|---|---|---|
id | string | — |
kind | "quote" | "metric" | "post" | — |
company | string | — |
mark | { letter: string; color: string }The company's mark: a letter on its color. | — |
name | string | — |
role | string | — |
photo | string | — |
text | string | — |
metric | { value: string; label: string }Metric cards: the number and what it measures. | — |
post | { handle: string; likes: number; replies: number; reposts: number }Social posts: the handle and counts. | — |
study | { challenge: string; results: { value: string; label: string }[]; industry: string; size: string; /** "Read the full story". */ href?: string }The case study the card opens. | — |