Split Layout Quote Metrics Hero Block for React

Edit CASE_STUDY at the top of the file: the company, its stage, its initials for the mark, the person quoted with their role and initials, the quote, and the metrics. Each metric has a label, the figure before and after, and the improvement in words. Keep the quote under about 40 words so it reads in one breath beside the headline, and get the customer's approval for both the quote and the numbers. The headline names the customer and the headline result, so update it with them.

The metrics are a description list. Each label is a term, and its value reads as, for example, 8 min, previously 4.2 hrs, then 97% faster: a visually hidden word says what the strike-through shows, since most screen readers don't announce struck text. The old figure is an s element, which marks it as no longer accurate, and the company's name heads the band as an h2 under the page's h1.

Yes. Both marks are our Avatar with only a fallback. Add an AvatarImage with the person's photo, or the company's logo, before the AvatarFallback, and the initials stay behind as the fallback if the image can't load. The avatars are hidden from screen readers because the name beside each one already says who it is, so an image there can keep an empty alt.

The headline and the quote sit side by side from the lg breakpoint. Below it they stack, the headline and both actions first, so the call to action is on the first screen, then the quote. The three metrics line up in a row of three from md, separated by rules that follow the reading direction, and stack one under the other on a phone. The two actions wrap instead of overflowing, down to 320px.

All three are links to #. Point the pill and Read the full story at the case study, and Start free trial at your sign-up page. On Base UI, each button renders its link with render={<a href="/stories/meridian" />} and nativeButton={false}.

Use the case study hero when you have before-and-after numbers that prove the return: the band makes the business case at a glance, and the quote gives it a human voice. Use a testimonial hero when you have a strong quote without hard figures, or when how customers feel matters more than what they measured.