Marketing

Logo cloud

Customer marks in a quiet row: greyscale and muted until hovered.

Examples

Logos

AcmeGlobexInitechUmbrellaHooli

Anatomy

.logosCentred row that wraps, with wide gaps. Text marks are set in muted, medium weight.
> *One mark each: text, <img> or <svg>. Greyscale at reduced opacity; full opacity on hover.

Accessibility

  • Logo images need alt with the company name; an inline <svg> needs role="img" and an aria-label.
  • Hover only lifts opacity. Linked logos rely on the global focus ring for keyboard users.
  • Precede the row with a short heading or sentence ("Trusted by") so a list of names has context.
Jump to
ProportionFoundations
MaterialFoundations
PresetsFoundations
ShellLayouts · Application
Container and stacksLayouts · Pages
SplitLayouts · Pages
Grid, bento, masonryLayouts · Pages
Switcher and rowLayouts · Pages
↑↓Move↵OpenescClose