Five Cell Bento Logos Block for React

One featured cell as tall as two rows plus four single cells make a complete two-by-two beside it, so the layout has no gaps. Add or remove a cell and the grid beside the featured one has a hole. For a different count, use logos-bento-wide-featured-top (one plus three) or the static grid wall.

Edit STORY for the featured customer (name, icon, lettering, industry, quote, result and who said it) and SUPPORTERS for the four others: each is a wordmark, an industry, a figure and its label. The names are fictional placeholders.

Both are links (href="#"): point the Shine Button at your customers page and Read the story at the case study. The Shine Button renders the link it's given with render, with nativeButton={false}. Read the story is an outline button that links the same way.

Below md the four cells are a horizontal scroller with scroll snapping, each about three quarters of the width so the next one shows. The scroller takes focus, so a keyboard user can scroll it with the arrow keys, and it is named "More customers". From md it becomes a two-by-two grid and the scroller behaviour is gone.

Each cell has a Guides layer: four hairlines that run slightly past the cell's corners and a + mark at its start corner. The gap between cells is large enough that neighbouring lines never touch.

The header and the cells fade up once when the page loads, with CSS transitions, and the supporting wordmarks ease to the text colour on hover. With reduced motion the transitions are off.