Masonry Testimonials Block for React

Change the columns-1 sm:columns-2 lg:columns-4 classes on the list. The browser fills each column from the top and balances them, so more quotes or longer ones never need any other change. gap-4 sets the space between columns and mb-4 on each item the space between cards; break-inside-avoid keeps a card whole instead of splitting it across two columns.

Down the first column, then the second, and so on, which is also the order in the file and the order a screen reader follows. A grid fills row by row instead, so if you would rather read across, use a plain grid. Put the quotes you most want read first at the top of the list: they land at the top of the first column.

The wall is a single column cut at 34 rem with a fade at its foot, so the page isn't twelve cards long. A ghost button, "Show all 12 notes", lifts the cut. It reports aria-expanded and names the wall it controls. The notes behind the cut are still in the page for screen readers. From md the whole wall always shows.

Edit QUOTES at the top of the file. Each entry has the quote, the author's name, initials and role, and an optional rating from 1 to 5. The wall shows exactly the quotes it is given, so adding or removing one needs no other change; the heading names the count, so update that too, and the button's count follows the list. The twelve people here are made up.

Yes. It is a list named Runner notes, and each item is a figure with the quote in a blockquote and the author in its figcaption. The stars are decorative: each rating is said once in words, as Rated 5 out of 5, and the initials avatars are hidden because the name follows them. Quote marks sit in a bdi element, so they stay put in right-to-left languages.

It's a link (href="#"): point it at your sign-up. It's a ShineButton with render set to an a element and nativeButton={false}.