Components

Filter Rail

A row of category filter pills above the Gallery page's job grid — progressive enhancement, so every image stays visible with JavaScript disabled.

Markup

<section class="filter-rail on-dark" aria-label="Filter job files">
  <div class="pills" data-filter-rail data-filter-target="#job-grid-a,#job-grid-b">
    <button class="pill" data-value="all" aria-pressed="true">All</button>
    <button class="pill" data-value="plumbing" aria-pressed="false">Plumbing</button>
    <button class="pill" data-value="heating" aria-pressed="false">Heating</button>
  </div>
</section>

Note this reuses the same .pills/.pill class names as the Closer Form's radio pills, but here each pill is a real <button> rather than a radio input + label pair — the toggled look comes from the aria-pressed attribute instead of :checked.

Filter target

data-filter-target on the .pills wrapper is a comma-separated list of selectors (here, the two Job Grid sections split across the Gallery page) whose [data-cat] children the filter applies to.

Javascript

Clicking a pill sets aria-pressed="true" on itself and false on its siblings, then toggles the .filter-hide class (display: none) on every matched item whose own data-cat doesn't equal the pill's data-value (the all pill matches everything). This is pure progressive enhancement: without JavaScript, no click handler attaches, the pills render as plain unstyled-toggle buttons, and every job-file card in the grid stays visible — nothing is ever hidden by default in markup or CSS alone.