Clipped Wall Testimonials Block for React

Every quote lives in one list, QUOTES, at the top of the file, and the button's count is its length. How much shows before the fade is the height of the clipped region: h-104 on phones and md:h-132 from md. Make them taller to show more notes, or shorter to show fewer.

It toggles the region between that fixed strip and h-auto, and the mask between a fade and no fade. Browsers that can animate to an automatic height, which is most of them now, grow it smoothly; the others open it at once. The new notes appear below the old ones, so the page above does not shift.

The button has aria-expanded and aria-controls pointing at the region, and it is the only control, so Tab reaches it once. The clipped notes are only visually hidden by the mask, so a screen reader reads all twenty-four in order; each is a figure with a blockquote and a figcaption, in a list named "Customer quotes".

The notes sit in CSS columns with column-rule, which draws the hairline between columns, and each note has a border-t. The band's top rule and the + marks on the rails come from the Guides component, the same lines every block on the page shares. Because the columns balance themselves, notes of any length fit without gaps.

The header and the wall fade up once on load, and the wall grows and the chevron turns when the button is pressed. All of it is CSS transitions, with no animation library. With reduced motion on, everything appears in place and the wall opens at once.

Edit QUOTES. Each entry has a quote, the author's name, initials and a role with the company, and an optional feature flag that sets that note one size up. The twenty-four people and companies here are made up. Quote marks sit in a bdi element so they stay put in right-to-left text.