Resizable Split Testimonials Block for React

It's a Resizable with two panels and a handle between them. The featured panel starts at 60 percent and the supporting panel at 40, and neither can go below 35 and 30 percent. Change the numbers and the panels' minSize to start elsewhere or to give a side more freedom. The starting split is each panel's defaultSize, such as "60%"; the library keeps the current split itself.

Yes. The handle is a focusable separator named "Resize quotes". With it focused, the arrow keys move the divider in small steps, and Home and End jump it to the limits. Touch screens can drag it too, though below the lg breakpoint the quotes stack and the handle is hidden, since a side-by-side split doesn't fit a phone.

A Guides with extend="sm" marks="corners" on the box draws the four sides and the + marks; there is no card background. The hairline between the two supporting quotes is a plain divide-y.

Below lg the split becomes a column: the featured quote on top, the two supporting quotes below it, each at full width, with a rule between them. The divider is removed from the page and from the keyboard order, and nothing scrolls sideways at 320 px.

It is the block's one primary control, in the header row: point its href at the full story. On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.

Each quote is a figure with a blockquote and a figcaption naming the person, and the supporting quotes form a list. The section's one heading is an h2. The divider is a separator with a value that reports how much room the first panel has. The initials avatars are decorative and hidden, since each name is written beside its avatar. The split uses the react-resizable-panels library, whose divider reports its value and responds to the arrow keys, Home and End.

The quotes and the split mirror: the featured quote sits on the right and the divider moves from the right. Quotation marks stay at the ends of each quote through bdi.

Add entries to SUPPORTING and they join the column. For a third panel, add another panel to panels and to the size state (Ark), or another ResizablePanel with its own handle and defaultSize (the other bases), with the three sizes summing to 100.