Skip to content
heyrav design system
PatternsShipped

Closing grid

The home page ends in a full-bleed field of the work itself, with the contact pitch in the hole. Grayscale at rest; hover lights a project.

Used onContact

Let's make something that converts.

Show code
<div class="d-grid-demo">
  <img src="../assets/img/ad-01.webp" alt=""><img src="../assets/img/observe.webp" alt=""><img src="../assets/img/torq.webp" alt=""><img src="../assets/img/dash.webp" alt="">
  <div class="d-grid-cap"><p class="h3">Let's make something that <em>converts.</em></p><div class="contact-actions"><a class="primary" href="#"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Email me</a><a class="ghost" href="#"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Resume</a></div></div>
  <img src="../assets/img/shot.webp" alt=""><img src="../assets/img/ad-02.webp" alt=""><img src="../assets/img/studio.webp" alt=""><img src="../assets/img/ad-03.webp" alt="">
</div>
  • A 24 × 14 field, about three-fifths filled, so the white is the subject. 12 × 18 in portrait.
  • Gutters are padding on each tile, not gap, so the void geometry stays exact.
  • Tiles are <button>s: they light their group, they never scroll the page.
  • Per-asset --grade pulls ten greys to one exposure; film grain uses overlay blend so paper stays paper.
  • A one-time clockwise colour sweep hints the interaction when the grid is fully in view.