Logo row

A band of the people already using the thing. One wrapping row, centred, muted until the reader points at one.

Basic

<ul data-logos>
  <li><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='26'%3E%3Ctext x='0' y='20' font-family='Georgia,serif' font-size='22' fill='%23222'%3EAtlas%3C/text%3E%3C/svg%3E" alt="Atlas"></li>
  <li>Ledger</li>
  <li>Hummingbird</li>
  <li><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='26'%3E%3Ctext x='0' y='20' font-family='Georgia,serif' font-size='22' fill='%23222'%3EMeridian%3C/text%3E%3C/svg%3E" alt="Meridian"></li>
  <li>Northwind</li>
</ul>

An <img> or a text mark, mixed freely. Images are set to one height and the text to one size, so the row reads as one band.

Notes

• Every mark sits at 70 per cent until it is hovered or something inside it takes focus. Fainter than that and a text mark falls under 4.5:1 on the page.
• Images are drawn in grey, and flipped as well on a dark page, so a logo drawn in ink does not disappear into it.
• Write the company's name in the alt. A logo with no name is a picture of nothing.
• Wrap a mark in an <a> to link it; the row answers :focus-within, so the keyboard lights it the way the mouse does.