Logo cloud

Preview Available in release assets

Present a finite set of client or partner marks as labelled supporting evidence.

Logo cloud in context

<section aria-labelledby="trusted-heading">
  <h2 id="trusted-heading">Trusted by independent teams</h2>
  <ul class="thin-logo-cloud">
    <li><span>Aperture</span></li>
    <li><span>Fieldwork Cooperative</span></li>
    <li><span>Nordhimmel Gemeinschaftswerkstatt</span></li>
    <li><span>Northline</span></li>
  </ul>
</section>

Show code

<section aria-labelledby="trusted-heading">
  <h2 id="trusted-heading">Trusted by independent teams</h2>
  <ul class="thin-logo-cloud">
    <li><span>Aperture</span></li>
    <li><span>Fieldwork Cooperative</span></li>
    <li><span>Nordhimmel Gemeinschaftswerkstatt</span></li>
    <li><span>Northline</span></li>
  </ul>
</section>

Anatomy

Section heading
Semantic list
Logo image or text fallback per item

Variants and sizes

Image marks
Text fallbacks
Linked partners
Logo reel for overflow

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Missing logo images
Long organization names
Monochrome marks
Narrow container
High contrast

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Static marks have no interaction; linked partners use descriptive ordinary links.

Accessibility

Provide a visible section heading, avoid repeating adjacent organization names in image alternatives, and never use an empty aria-label as the only context.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use a list.thin-logo-cloud. Each child contains an image with deliberate alt text or a readable text fallback.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts