Wordmark Only Strip Logos Block for React

Edit WORDMARKS at the top of the file. Each entry is a name and a lettering, the Tailwind classes for its type. Optional fields set the artwork around the name: lead and tail (a slash, a bracket, a full stop) and split, the number of letters set in a light weight before the heavy rest. The names are fictional placeholders for your own customers.

Replace a name with the company's logo: an inline svg drawn in currentColor, with role="img" and an aria-label, keeps the muted colour and the hover. An img takes the company's name as its alt and needs one-colour artwork, or the strip stops being quiet in light and dark mode.

A list named "Teams that hand off designs with Loomwright", then each company's name as text. A slash, bracket or full stop is part of the artwork and is hidden from assistive technology, so "Saffronly" isn't read as "open bracket, Saffronly, close bracket". The names use the theme's muted text colour at full strength, which passes WCAG AA on the page background.

The grid fills from the right, while each name keeps its own direction, as a logo would, so a slash stays before its name and a bracket pair stays around it.

Eight fill one row at xl, two rows of four from sm and four rows of two on a phone. Fewer or more work too, but a number that doesn't divide into those columns leaves a short last row; four or six look best with the grid classes changed to match.

The row fades up once when the page loads, with a CSS transition, and each name's colour eases on hover. With reduced motion the transition is off, and the strip simply appears.