Skip to content

Logo reel

Preview Available in release assets

Present an overflow set of linked organization marks in a natively scrollable semantic list without duplicating the wrapping Logo cloud or inventing carousel behavior.

Logo reel primary example

Show code
<section class="thin-logo-reel" aria-labelledby="logo-reel-title">
  <h2 id="logo-reel-title">Organizations supporting this work</h2>
  <ul class="thin-reel" id="supporter-logos">
    <li>
      <a href="/partners/aperture/">
        <img src="/logos/aperture.svg" alt="Aperture">
      </a>
    </li>
    <li>
      <a href="/partners/fieldwork/">
        <img src="/logos/fieldwork.svg" alt="Fieldwork Cooperative">
      </a>
    </li>
    <li>
      <a href="/partners/northline/"><span>Northline — logo unavailable</span></a>
    </li>
  </ul>
  <div class="thin-reel-controls">
    <button class="thin-button" data-variant="secondary" type="button" data-reel-previous="supporter-logos">Previous organizations</button>
    <button class="thin-button" data-variant="secondary" type="button" data-reel-next="supporter-logos">Next organizations</button>
    <output data-reel-status="supporter-logos">Item 1 of 3</output>
  </div>
</section>

Each authored example uses the production assets and includes copyable markup.

Linked organization marks

A constrained example keeps the marks in overflow so the explicit Reel enhancement can demonstrate bounded Previous/Next controls. Every destination remains a native link.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-linked-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-linked-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-linked" tabindex="0" aria-label="Organization marks">
    <li>
      <a href="/foundations/icons/">
        <img src="/icons/svg/heart.svg" alt="Community group">
      </a>
    </li>
    <li>
      <a href="/layouts/stack/">
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </a>
    </li>
    <li>
      <a href="/foundations/accessibility-modes/">
        <img src="/icons/svg/users.svg" alt="Documentation collective">
      </a>
    </li>
  </ul>
  <div class="thin-reel-controls">
    <button class="thin-button" type="button" data-reel-previous="logos-linked">Previous organizations</button>
    <button class="thin-button" type="button" data-reel-next="logos-linked">Next organizations</button>
    <output data-reel-status="logos-linked">Item 1 of 3</output>
  </div>
</section>
<script type="module">import { enhanceReels } from "/behaviors.js"; enhanceReels(document);</script>

Unlinked evidence marks

Informational marks remain a named semantic list with useful image alternatives. No link or click behavior is invented.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-unlinked-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-unlinked-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-unlinked" tabindex="0" aria-label="Organization marks">
    <li>
      <span>
        <img src="/icons/svg/heart.svg" alt="Community group">
      </span>
    </li>
    <li>
      <span>
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </span>
    </li>
    <li>
      <span>
        <img src="/icons/svg/users.svg" alt="Documentation collective">
      </span>
    </li>
  </ul>
</section>

Readable text fallbacks

Readable names replace missing graphics. Text remains actual content at every size and in forced colors.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-text-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-text-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-text" tabindex="0" aria-label="Organization marks">
    <li>
      <span><span>Community group</span></span>
    </li>
    <li>
      <span><span>Research cooperative</span></span>
    </li>
    <li>
      <span><span>Documentation collective</span></span>
    </li>
  </ul>
</section>

Native scrolling without controls

This fixture includes no optional initializer or controls. Focus the scrollable list or follow its ordinary links.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-native-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-native-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-native" tabindex="0" aria-label="Organization marks">
    <li>
      <a href="/foundations/icons/">
        <img src="/icons/svg/heart.svg" alt="Community group">
      </a>
    </li>
    <li>
      <a href="/layouts/stack/">
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </a>
    </li>
    <li>
      <a href="/foundations/accessibility-modes/">
        <img src="/icons/svg/users.svg" alt="Documentation collective">
      </a>
    </li>
  </ul>
</section>

Anatomy

  • Named section
  • Semantic list using the Reel layout
  • One durable partner link per item
  • Logo image or readable text fallback
  • Optional bounded Reel controls and status

Variants and sizes

  • Linked marks — shown above
  • Unlinked evidence marks — shown above
  • Text fallbacks — shown above
  • Native scrolling without controls — shown above

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

First, middle and final organization

Next reaches the middle and final mark; controls disable at the authored bounds. No wrapping, duplication or automatic scrolling is introduced.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-states-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-states-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-states" tabindex="0" aria-label="Organization marks">
    <li>
      <a href="/foundations/icons/">
        <img src="/icons/svg/heart.svg" alt="Community group">
      </a>
    </li>
    <li>
      <a href="/layouts/stack/">
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </a>
    </li>
    <li>
      <a href="/foundations/accessibility-modes/">
        <img src="/icons/svg/users.svg" alt="Documentation collective">
      </a>
    </li>
  </ul>
  <div class="thin-reel-controls">
    <button class="thin-button" type="button" data-reel-previous="logos-states">Previous organizations</button>
    <button class="thin-button" type="button" data-reel-next="logos-states">Next organizations</button>
    <output data-reel-status="logos-states">Item 1 of 3</output>
  </div>
</section>
<script type="module">import { enhanceReels } from "/behaviors.js"; enhanceReels(document);</script>

Long name and missing mark

The missing mark has a visible text replacement. Long names wrap inside the constrained reel rather than widening the page.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-difficult-title" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-difficult-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-difficult" tabindex="0" aria-label="Organization marks">
    <li>
      <a href="/foundations/icons/">
        <img src="/icons/svg/heart.svg" alt="Community group">
      </a>
    </li>
    <li>
      <a href="/layouts/stack/">
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </a>
    </li>
    <li>
      <a href="/foundations/accessibility-modes/"><span>International documentation and accessibility research collective — logo unavailable</span></a>
    </li>
  </ul>
  <div class="thin-reel-controls">
    <button class="thin-button" type="button" data-reel-previous="logos-difficult">Previous organizations</button>
    <button class="thin-button" type="button" data-reel-next="logos-difficult">Next organizations</button>
    <output data-reel-status="logos-difficult">Item 1 of 3</output>
  </div>
</section>
<script type="module">import { enhanceReels } from "/behaviors.js"; enhanceReels(document);</script>

RTL and system presentation modes

The authored RTL direction changes the physical scroll axis. Reduced-motion and forced-colors media preferences use the same native links and text; automated checks emulate these modes separately from human OS review.

Show code
<section class="thin-logo-reel" aria-labelledby="logos-rtl-title" dir="rtl" style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2 id="logos-rtl-title">Organization marks</h2>
  <p>Fictional organizations and local icons illustrate this bounded reel. Demo destinations lead to existing catalog documentation.</p>
  <ul class="thin-reel" id="logos-rtl" tabindex="0" aria-label="Organization marks">
    <li>
      <a href="/foundations/icons/">
        <img src="/icons/svg/heart.svg" alt="Community group">
      </a>
    </li>
    <li>
      <a href="/layouts/stack/">
        <img src="/icons/svg/package.svg" alt="Research cooperative">
      </a>
    </li>
    <li>
      <a href="/foundations/accessibility-modes/"><span>International documentation and accessibility research collective — logo unavailable</span></a>
    </li>
  </ul>
  <div class="thin-reel-controls">
    <button class="thin-button" type="button" data-reel-previous="logos-rtl">Previous organizations</button>
    <button class="thin-button" type="button" data-reel-next="logos-rtl">Next organizations</button>
    <output data-reel-status="logos-rtl">Item 1 of 3</output>
  </div>
</section>
<script type="module">import { enhanceReels } from "/behaviors.js"; enhanceReels(document);</script>
  • First item — shown above
  • Middle item — shown above
  • Last item — shown above
  • Missing logo — shown above
  • Long organization name — shown above
  • Right-to-left content — shown above
  • Narrow container — shown above
  • Reduced motion — shown above
  • Forced colors — shown above

Interaction and keyboard behavior

Touch, trackpad, keyboard scrolling, and every partner link work natively. Optional existing Reel coordination moves only between authored items, stops at both ends, reports position, and honors reduced motion.

Accessibility

Use a visible section heading and semantic list, give linked logos concise organization names, avoid duplicate adjacent names, retain visible focus, and keep readable text when an image is unavailable.

Contract
MEDIA
Basis
Native horizontal scroll container, links, and buttons; no APG carousel claim
Evidence
  • tests/unit/library/logo-reel.test.ts

API

Use section.thin-logo-reel with a uniquely identified ul.thin-reel. Optional buttons reference that id with data-reel-previous and data-reel-next; pair them with data-reel-status.

Behavior tier: dependency-free

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

Fallback

The semantic list remains horizontally scrollable and every organization destination remains an ordinary link when optional behavior or CSS is unavailable.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /behaviors.js

Dependencies: None

Source: packages/ui/src/items/logo-reel/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes