Components

Job Grid

A three-column grid of labeled job-file photo cards — used on the home page as a preview, and on Gallery as the full filterable set.

Markup

<section class="jobs on-dark" id="job-files">
  <div class="grid">
    <figure class="shot rv">
      <div class="frame"><span class="stamp">N&ordm; 29847</span><img src="img/job-sewer.jpg" width="928" height="1152" loading="lazy" alt="…"></div>
      <figcaption class="cap"><b>SEWER MAIN, CORTLAND AVE</b><span>1 DAY</span></figcaption>
    </figure>
  </div>
  <div class="foot"><a class="tert" href="gallery.html">Open the job files</a></div>
</section>

Card anatomy

Each card is a <figure class="shot"> reusing the same .frame/ .stamp pattern as Trades Rows, with a .cap caption row (job label on the left, duration on the right) below the photo.

Filterable grid (Gallery)

On the Gallery page, each .shot additionally carries a data-cat attribute naming its trade, and the grid is split into two .jobs sections (#job-grid-a, #job-grid-b) so a Filter Rail above them can filter across both at once. See Filter Rail for the pill markup and its JavaScript.

<figure class="shot rv" data-cat="plumbing">…</figure>