Components

Notes List

Blog index list rows, on paper by default, plus a dark .rail-list sibling used for related-post rails and the 404 page's route list.

Markup

<ul class="list">
  <li class="rv">
    <a href="blog-single.html">
      <span class="t">Why your water heater rumbles &mdash; and the week to worry.</span>
      <span class="meta">PLUMBING &middot; 4 MIN</span>
      <span class="go" aria-hidden="true">&rarr;</span>
    </a>
  </li>
</ul>

The list itself can be classed either .list nested inside a .notes section wrapper, or the standalone .notes-list class — both compile to the same row layout. Each row's link is a CSS grid (title, meta, arrow) that nudges right and colors its trailing .go arrow on hover, the same interaction language as Service Rows.

Dark rail sibling

.rail-list is the same row pattern restyled for a dark/iron section — used for “related posts” under a blog article and for the 404 page's list of useful links. Its title column additionally renders in the display typeface (uppercase, heavier) rather than the notes list's body-weight title.

<ul class="rail-list">
  <li><a href="services.html"><span class="t">Trades</span><span class="meta">FOUR TRADES + THE NIGHT LINE</span><span class="go" aria-hidden="true">&rarr;</span></a></li>
</ul>