Skip to content
heyrav design system
PatternsShipped

Case row

Text and a particle illustration side by side, alternating sides down the page, one pill to the case study.

Used onSelected work

ViewRyt

A single product page that had to sell an eye-care supplement to cold traffic.

  • Rebuilt the page around proof
  • Shipped 12 ad creatives
Explore Case Study
Show code
<div class="d-case">
  <div><h3 class="h3">ViewRyt</h3><p class="prose">A single product page that had to sell an eye-care supplement to cold traffic.</p><ul class="did"><li>Rebuilt the page around proof</li><li>Shipped 12 ad creatives</li></ul><a class="case-link" href="#">Explore Case Study <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></a></div>
  <div class="fx-wrap"><img src="../assets/img/dots.webp" alt="" loading="lazy"></div>
</div>
  • Grid 1fr 1.05fr, gap 64; .flip puts the visual first on alternate rows.
  • Rows are separated by a hairline, but the first drops it so it never doubles the section divider.
  • Stacks below 900 with the visual under the text, whatever the flip.