Headline Testimonials Block for React

Edit TAKEAWAYS at the top of the file. Each entry has a headline, the quote and the person's details. Write the headline as the result in the customer's words, in under about eight words, and let the quote carry the detail. The grid is built for six; with five or seven the last row is uneven.

The list sits on the border colour with a one-pixel gap, and each cell paints the page background over it, so the lines are just the gap showing through. That keeps the dividers correct at one and two columns without per-cell border rules, and they follow your theme's border colour in light and dark. The divider between the header and the grid is the grid column's own start border, and Guides draws the + marks where the lines meet.

From lg the page column is two columns, about two fifths for the header and three fifths for the grid, which has two columns of cells; the header sticks to the top of the screen while the grid scrolls. Below lg the header comes first and the grid below it; from sm it has two columns and below sm it is one swipeable row.

Below sm the six cells sit in one row with snap points, each 85% of the width so the next one shows, and the first headline starts on the first screen. The row is a tab stop, so a keyboard can scroll it with the arrow keys. From sm the cells sit in a grid and nothing scrolls sideways.

The cells are a list named "Customer quotes". Each has its headline as an h3 under the section's h2, then a figure with the quote as a blockquote and the name and role as its caption. The initials avatar is hidden, since the name is written beside it.

Yes. The divider is on the inline start edge of the grid column, so it flips, the name line follows the reading direction and the quote sits in a bdi, so its quotation marks stay at the ends of the sentence.