Navigation

 v0.0.4
Marketing blocks

Logo cloud

A quiet row of the names that already trust you.

A logo cloud is a quiet row of the names that already trust you. It works by being understated: the marks are in muted ink, all one weight, and none is a link. Put it under a hero, where a visitor decides whether to keep reading.

Logo cloud

<section class="container-inline px-lg py-3xl" aria-labelledby="logos-title">  <div class="flex flex-col items-center gap-lg max-w(960) mx-auto">    <p class="eyebrow" id="logos-title">Trusted by teams at</p>    <ul class="flex flex-wrap items-center justify-center gap-md col-gap-2xl m(0) p(0) fg-text-muted">      <li class="flex text-xl font-medium tracking-tight">Northwind</li>      <li class="flex text-xl font-medium tracking-tight">Halcyon</li>      <li class="flex text-xl font-medium tracking-tight">Orbit</li>      <li class="flex text-xl font-medium tracking-tight">Quanta</li>      <li class="flex text-xl font-medium tracking-tight">Lumen</li>      <li class="flex text-xl font-medium tracking-tight">Kestrel</li>    </ul>  </div></section>

Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.

The examples set names in type, since the library ships no one's logo. Replace each with an inline <svg> that uses currentColor, and the row keeps its one ink in light and in dark.

#What is in it

  • A wrapping, centered row. flex flex-wrap items-center justify-center with a larger gap between marks than between lines: gap-md col-gap-2xl.
  • One ink. fg-text-muted on the list. A logo in its own colors would be the loudest thing on the page.
  • A list. <ul> with a label, so the number of names is announced and the row has a name.

#In a grid

When the names deserve more room, set each on a sheet in a tray: two columns, then three from 42rem of block. The tray's 4px inset is the gap, so the corners nest.

In a grid

<section class="container-inline px-lg py-3xl" aria-labelledby="logos-grid-title">  <div class="flex flex-col gap-lg max-w(960) mx-auto">    <h2 class="heading text-center" id="logos-grid-title">The teams behind the sites you use every day</h2>    <ul class="tray grid gap(4) grid-cols(2) grid-cols(3)@container(--2xl) m(0)">      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Northwind</li>      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Halcyon</li>      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Orbit</li>      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Quanta</li>      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Lumen</li>      <li class="sheet sheet-raised flex items-center justify-center h(96) text-xl font-medium tracking-tight fg-text-muted">Kestrel</li>    </ul>  </div></section>

#Accessibility

  • Give each SVG logo a name: role="img" with aria-label="Northwind", or visually hidden text beside a decorative mark.
  • Muted ink on the base surface still meets contrast for large text; keep the marks at least 20px tall.
  • Use names you have permission to show.