Split Raised Panel Logos Block for React

Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering and a mark. The panel is laid out for five: the first two tiles take half a row from the sm breakpoint and the rest a third, and tileSpan holds that rule. For another count, change tileSpan and the grid's column count together. The names are fictional placeholders for your own customers.

No. It follows your theme: it has no dark scope, so it is light on a light page and dark on a dark one. It stays distinct because the muted shell, the ring and the shadow lift it off the page, and the tiles inside are one step lighter or darker than the card.

It is a link (href="#"): point Find a locker site at your site finder. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus. The button renders the link it's given with render, with nativeButton={false}.

The layout mirrors: the copy stays at the start of the line and the panel at the end. The tiles read in the page's direction, and each wordmark keeps its own direction, as a logo would.

The copy comes first, then the panel at the full width of the column: five tiles two across, the last one spanning both. The tiles keep their size and nothing scrolls sideways at 320 pixels.

The copy and the panel fade up once when the page loads, with CSS transitions, and a wordmark's colour eases on hover. With reduced motion every transition is off and the section simply appears.