Featured Quote Split Logos Block for React Aria

Edit FLAGSHIP and QUOTE at the top of the file. FLAGSHIP is the customer's name, an icon (any Lucide icon), the lettering classes for the name's type, and the two small lines under the plate. QUOTE is the text and the person: initials, name and role. Keep the quote to two sentences with a number in it, so it reads like something a real person said.

Replace the icon and the name inside the h2 with the customer's one-colour logo, an inline svg in currentColor with role="img" and an aria-label, or an img with the customer's name as its alt. The plate is a muted box with a ring, so a dark or a light logo both sit on it. Keep the heading's text, because it names the story for screen readers.

The quote is a figure holding a blockquote and a figcaption, so assistive technology reads it as a quotation with its source. The curly quotation marks are text inside the quote, wrapped in a bdi element so a right-to-left page keeps them in order. The avatar shows initials and is hidden from assistive technology, because the person's name is already in the caption.

From lg the two parts sit side by side and a hairline between them, with a + mark where it meets the block's top rule, shows the split. Below lg the parts stack and a horizontal rule with + marks takes its place, so the block reads as two ruled parts on a phone too. Neither line touches the rails: the rails and the top rule come from the page spine, so the block lines up with its neighbours.

The plate and the quote fade up once when the page loads, the quote a moment after the plate, with CSS transitions. With reduced motion the transitions are off and the block simply appears.

Yes. The plate is bg-muted with a foreground ring and nothing is a fixed colour, so the block follows whichever preset you install, light or dark. The page's primary colour is not used at all, so the block never competes with the call to action elsewhere on the page.