gallery

Two related image primitives extracted from the "In rooms" supplier band on the integral-blinds page: a responsive, credited gallery grid, and a full-bleed banner thumbnail for the top of a card. Colours inherit the host surface; every proportion is a token.

Import

<link rel="stylesheet" href="https://assets.gf.cx/gallery/gallery.css">

1 · Gallery band

Optional serif title, responsive auto-fill grid of aspect-locked figures with a gentle hover push-in, and a credit line.

<section class="gallery">
  <h2 class="gallery__title">In <em>rooms</em></h2>
  <div class="gallery__grid">
    <figure class="gallery__fig"><img src="…" alt="…" loading="lazy" width="1200" height="900"></figure>
    <!-- … -->
  </div>
  <p class="gallery__credit">Reference images — not an endorsement.</p>
</section>

2 · Card banner thumbnail

A full-bleed photo at the top of a padded card. Set the bleed tokens to the card's own padding so the image reaches the edges.

<article class="your-card" style="--gallery-thumb-bleed-top:20px; --gallery-thumb-bleed-x:22px;">
  <div class="gallery-thumb"><img src="…" alt="…" loading="lazy" width="1200" height="546"></div>
  <h3>Card title</h3>
</article>

Tokens