Elastic Column Testimonials Block for React

The list is a CSS grid with three equal columns from lg. A has() rule on it notices which story is hovered or contains the keyboard focus and swaps the track list, for instance from 1fr 1fr 1fr to 1.6fr 1fr 1fr. The grid-template-columns change is a CSS transition, so it needs no script. The rules live in the ELASTIC string at the top of the file; change the 1.6fr for a stronger or gentler stretch.

Yes. Each story holds a "Full quote" button, so Tab lands inside it and the same rule widens it for as long as focus is there. On a touch screen there's no hover, so the stories stay equal and the button still opens the quote in full. Browsers without has() support simply keep the equal columns.

It toggles aria-expanded and removes the five-line clamp from that story's quote; its chevron turns over. Each story opens on its own, and the button's name includes the speaker ("Full quote from Nandi Dlamini"). Opening a story makes it, and its row, taller by design; nothing else moves sideways.

The columns don't stretch at all: the three stay equal and nothing animates, including the chevron, the tint and the entrance. The button still opens the quote, and the Shine Button's light only fades in.

The section's heading is an h2 and the stories are the items of a list named "Customer stories", each a figure with a blockquote and a figcaption. The clamp only hides overflow visually, so a screen reader reads each quote in full whether or not it's opened. The quote sits in a bdi, so its marks stay put in right-to-left languages.

Below lg the stories stack in one column inside the frame, each as wide as the screen with a hairline above it, and no column stretches. The header's button sits under the text, so the first story starts on the first screen. Nothing has a fixed height or width, so the stories hold their quotes down to 320 px.