Three Equal Featured Bento Logos Block for React

Edit STORIES at the top of the file. Each story has a customer (an icon, its lettering, how the icon sits beside the name, and the name), an industry, a figure and its label, a quote, and a person with initials and a role. The columns are equal, so keep the three quotes to about two lines and the figures to a few characters.

Yes, but the layout is three columns from md: change md:grid-cols-3 to match the count and the dividers follow, because they come from the list itself. The + marks sit on every divider after the first, so they stay correct for any count.

The three columns become a row of cards you swipe through, each snapping into place at 85 percent of the width, so the next story shows at the edge as a hint. The list is focusable so keyboard users can scroll it with the arrow keys, and it shows a focus ring.

The stories are items of one list. Each quote is a figure with a blockquote and a figcaption for the person; each figure is a term and its description. Signs and units sit in bdi elements so a right-to-left layout keeps them in reading order, and the wordmarks keep their own left-to-right direction.

Yes. The page background, hairlines and a muted plate with a faint ring are the only surfaces; there is no dark scope and no primary colour. The block follows your preset in light and dark, in square or rounded corners.