Featured Focal Diagram Logos Block for React

Edit FLAGSHIP for the centre, and START_COLUMN and END_COLUMN for the three on each side. Each entry is a name, an icon, a lettering and a mark. The curves aim at one sixth, one half and five sixths of the columns' height, so keep exactly three customers in each column and the lines stay on the chips.

Three paths in one SVG per side, in a 100 by 100 box stretched to the grid cell with preserveAspectRatio="none" and vector-effect: non-scaling-stroke, so the line is always a hairline. The second SVG is the first mirrored with a CSS scale, and each flips again on a right-to-left page. The SVGs are decoration and hidden from assistive technology.

The curves are hidden below lg, where the columns would be too narrow for them. The flagship sits on top, centred, and the six chips fall into two columns of three under it from sm. On the narrowest phones the columns stack into one, so the chips never crowd.

Yes. The header is an h2, the flagship a card with its name as an h3, and the six customers are two lists, "Customers, first three" and "Customers, last three", with each company's name as text. The icons and the curves are hidden from assistive technology, and nothing in the chips is focusable, so the hover colour is only a visual touch.

Yes. Nothing is dark by itself: the panel is the card colour with a ring and a shadow, the shell a tint of the muted colour, the chips the page colour and the curves the border colour, so both light and dark presets keep the panel lifted.

The header and the frame fade up once when the page loads, with CSS transitions, and each chip's text eases to the text colour on hover. With reduced motion the transitions are off. The curves are static.