Skip to content

Gallery layout

Stable Available in release assets

Compose one primary linked figure with a resilient set of linked supporting views without owning selection, zoom, or product state.

Show code
<section class="thin-gallery-layout" aria-labelledby="gallery-layout-title">
  <figure>
    <a href="field-pack-front-large.jpg">
      <img src="field-pack-front.jpg" alt="Field pack, front view">
    </a>
    <figcaption id="gallery-layout-title">Field pack, front view</figcaption>
  </figure>
  <ul aria-label="More product views">
    <li>
      <a href="field-pack-side-large.jpg">
        <img src="field-pack-side.jpg" alt="Field pack, side view">
      </a>
    </li>
    <li>
      <a href="field-pack-detail-large.jpg">
        <img src="field-pack-detail.jpg" alt="Field pack buckle detail">
      </a>
    </li>
  </ul>
</section>

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

Product views

Every view remains a durable image link.

Show code
<section class="thin-gallery-layout" aria-labelledby="gallery-layout-title">
  <figure>
    <a href="field-pack-front-large.jpg">
      <img src="field-pack-front.jpg" alt="Field pack, front view">
    </a>
    <figcaption id="gallery-layout-title">Field pack, front view</figcaption>
  </figure>
  <ul aria-label="More product views">
    <li>
      <a href="field-pack-side-large.jpg">
        <img src="field-pack-side.jpg" alt="Field pack, side view">
      </a>
    </li>
    <li>
      <a href="field-pack-detail-large.jpg">
        <img src="field-pack-detail.jpg" alt="Field pack buckle detail">
      </a>
    </li>
  </ul>
</section>

The same structure supports named editorial images.

Show code
<section class="thin-gallery-layout" aria-labelledby="gallery-layout-title">
  <figure>
    <a href="field-pack-front-large.jpg">
      <img src="field-pack-front.jpg" alt="Workshop, front view">
    </a>
    <figcaption id="gallery-layout-title">Workshop, front view</figcaption>
  </figure>
  <ul aria-label="More workshop views">
    <li>
      <a href="field-pack-side-large.jpg">
        <img src="field-pack-side.jpg" alt="Workshop, side view">
      </a>
    </li>
    <li>
      <a href="field-pack-detail-large.jpg">
        <img src="field-pack-detail.jpg" alt="Workshop buckle detail">
      </a>
    </li>
  </ul>
</section>

Local thumbnail size

Customize both thumbnail tracks and the outer gap.

Show code
<section class="thin-gallery-layout" style="--thin-gallery-main-min: 18rem; --thin-gallery-thumb-size: 5rem; --thin-gallery-space: 2rem" aria-labelledby="gallery-layout-title">
  <figure>
    <a href="field-pack-front-large.jpg">
      <img src="field-pack-front.jpg" alt="Field pack, front view">
    </a>
    <figcaption id="gallery-layout-title">Field pack, front view</figcaption>
  </figure>
  <ul aria-label="More product views">
    <li>
      <a href="field-pack-side-large.jpg">
        <img src="field-pack-side.jpg" alt="Field pack, side view">
      </a>
    </li>
    <li>
      <a href="field-pack-detail-large.jpg">
        <img src="field-pack-detail.jpg" alt="Field pack buckle detail">
      </a>
    </li>
  </ul>
</section>

Anatomy

  • Named gallery region
  • Primary linked figure and caption
  • Semantic list of supporting image links

Variants and sizes

  • Product views — shown above
  • Editorial gallery — shown above
  • Local thumbnail-size override — shown above

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

Long content and missing media

Long localized text and broken image resources retain text alternatives and durable links.

Show code
<section class="thin-gallery-layout" aria-labelledby="gallery-layout-title">
  <figure>
    <a href="field-pack-front-large.jpg">
      <img src="field-pack-front.jpg" alt="Field pack, front view">
    </a>
    <figcaption id="gallery-layout-title">Field pack, front view</figcaption>
  </figure>
  <ul aria-label="More product views">
    <li>
      <a href="field-pack-side-large.jpg">
        <img src="field-pack-side.jpg" alt="Field pack, side view">
      </a>
    </li>
    <li>
      <a href="field-pack-detail-large.jpg">
        <img src="field-pack-detail.jpg" alt="Field pack buckle detail">
      </a>
    </li>
    <li>
      <a href="workshop-view-3.jpg">
        <img src="missing-view-3.jpg" alt="Workshop supporting view 3">
      </a>
    </li>
    <li>
      <a href="workshop-view-4.jpg">
        <img src="missing-view-4.jpg" alt="Workshop supporting view 4">
      </a>
    </li>
    <li>
      <a href="workshop-view-5.jpg">
        <img src="missing-view-5.jpg" alt="Workshop supporting view 5">
      </a>
    </li>
    <li>
      <a href="workshop-view-6.jpg">
        <img src="missing-view-6.jpg" alt="Workshop supporting view 6">
      </a>
    </li>
    <li>
      <a href="workshop-view-7.jpg">
        <img src="missing-view-7.jpg" alt="Workshop supporting view 7">
      </a>
    </li>
    <li>
      <a href="workshop-view-8.jpg">
        <img src="missing-view-8.jpg" alt="Workshop supporting view 8">
      </a>
    </li>
    <li>
      <a href="workshop-view-9.jpg">
        <img src="missing-view-9.jpg" alt="Workshop supporting view 9">
      </a>
    </li>
    <li>
      <a href="workshop-view-10.jpg">
        <img src="missing-view-10.jpg" alt="Workshop supporting view 10">
      </a>
    </li>
  </ul>
</section>

Narrow RTL container

Reflow is exercised without changing reading or link order.

Show code
<div dir="rtl">
  <section class="thin-gallery-layout" aria-labelledby="gallery-layout-title">
    <figure>
      <a href="field-pack-front-large.jpg">
        <img src="field-pack-front.jpg" alt="Field pack, front view">
      </a>
      <figcaption id="gallery-layout-title">Field pack, front view</figcaption>
    </figure>
    <ul aria-label="More product views">
      <li>
        <a href="field-pack-side-large.jpg">
          <img src="field-pack-side.jpg" alt="Field pack, side view">
        </a>
      </li>
      <li>
        <a href="field-pack-detail-large.jpg">
          <img src="field-pack-detail.jpg" alt="Field pack buckle detail">
        </a>
      </li>
    </ul>
  </section>
</div>
  • Single supporting view — documented, example pending
  • Long gallery — shown above
  • Mixed image ratios — documented, example pending
  • Image failure — shown above
  • Narrow container — shown above
  • No JavaScript — documented, example pending

Interaction and keyboard behavior

This composition owns no JavaScript behavior. Links, images, lists, reading order, scrolling, and focus retain native behavior.

Accessibility

Choose semantic wrappers for the content, preserve logical source order, provide meaningful image alternatives and captions, and keep every destination available as an ordinary link.

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

API

Use .thin-gallery-layout with a primary figure followed by a ul of supporting linked views. Override --thin-gallery-main-min, --thin-gallery-thumb-size, or --thin-gallery-space locally.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-gallery-main-min28remMinimum intrinsic size of the primary gallery region.
--thin-gallery-thumb-size7remMinimum intrinsic size of supporting thumbnail tracks.
--thin-gallery-spacevar(--thin-space-m)Gap between primary and supporting gallery regions.

Fallback

Semantic content, media, product links, and captions remain in ordinary document order when layout styles are unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Stability evidence

  • Item-specific API, state and promotion contract: test:tests/unit/library/layout-promotion.test.ts
  • No-JS/no-CSS fallback, semantic accessibility and asset-path contract: test:tests/browser/layout-promotion.spec.ts
  • Cross-browser difficult-content geometry, print and forced-colors screenshots: test:tests/browser/layout-promotion-stress.spec.ts