Logo block

A responsive strip of brand or partner logos - a "trusted by" or "works with" row. The logos are normalised to a common height and flattened to a single tone, so a mismatched set of source logos (different colours, weights and proportions) reads as one tidy row. The tone follows the theme: black in light, white in dark. Toggle the theme to see it switch.

Default logo block

Wrap each logo in a l-ui-logo-block__item and give the image l-ui-logo-block__logo. The block wraps three-up on small screens and spreads to a single row from md up. Mark the container as a list and give each item a listitem role so assistive technology announces the set, and keep meaningful alt text on each logo.

<div class="l-ui-logo-block" role="list" aria-label="Trusted by these companies">
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo l-ui-logo-block__logo--wordmark" src="northwind.svg" alt="Northwind">
  </span>
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo" src="acme.svg" alt="Acme">
  </span>
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo" src="globex.svg" alt="Globex">
  </span>
  <%# ...more logos %>
</div>

Wordmark logos

Icon-style marks and wide name lockups don't share a sensible height. Add l-ui-logo-block__logo--wordmark to a wide wordmark so it gets a little more height than the compact marks around it and the row stays optically balanced.

<div class="l-ui-logo-block" role="list" aria-label="Hosting partners">
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo l-ui-logo-block__logo--wordmark" src="northwind.svg" alt="Northwind">
  </span>
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo l-ui-logo-block__logo--wordmark" src="umbrella.svg" alt="Umbrella Corp">
  </span>
  <span class="l-ui-logo-block__item" role="listitem">
    <img class="l-ui-logo-block__logo l-ui-logo-block__logo--wordmark" src="globex.svg" alt="Globex">
  </span>
</div>

CSS classes

Logo block CSS classes
Class	Description
`l-ui-logo-block`	Responsive strip container; wraps three-up on small screens, single row from `md`
`l-ui-logo-block__item`	Wrapper for a single logo (give it `role="listitem"`)
`l-ui-logo-block__logo`	The logo image; normalised height, flattened to the foreground tone (black in light, white in dark)
`l-ui-logo-block__logo--wordmark`	Taller variant for wide name lockups

The logos are flattened with a CSS filter, so their source colours are ignored - any logo set renders in one consistent tone. Supply normal full-colour logos and provide both an accessible alt and a list role on the container so the strip is announced as a group.