Testimonial Star Grid
BlockReviews in a grid, each with a star rating, the quotation and its author.
- Sections
- 1 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add testimonial-star-gridimport { DEFAULT } from "@/components/blocks/testimonial-star-grid"; export default function Page() { return <DEFAULT />;}<TestimonialStarGridBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Real feedback from the people building with it every day." |
heading | ReactNode | "What people are saying" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
ratingLabelHow a rating is read aloud. | (rating: number, outOf: number) => string | (rating, outOf) => `Rated ${String(rating)} out of ${String(outOf)}` |
testimonials | StarGridTestimonial[] | DEFAULT_STAR_GRID_TESTIMONIALS |
Plus every attribute of <section> except title.
A section named by its heading, with the reviews as a list of figures: a blockquote and a figcaption naming its author. A rating is one image named in words ("Rated 4 out of 5") rather than five unlabelled stars, and colour is not the only difference between filled and empty stars. Avatars are hidden, since the name is beside them. The cascade collapses to nothing under reduced motion, and the hover lift only happens when motion is allowed.