109Post footer

What closes a post: the author bio, the series it belongs to, prev/next by title, and the related shelf. Prev/next carries the real title for the same reason the lesson nav does — an arrow pair with no titles makes the reader click to find out where they are going.

Use it for

The end of every post
Series box near the TOP as well, when the post is part of one — a reader landing on part 3 from search needs to know parts 1 and 2 exist

Not for

A wall of twelve related posts. Four is a shelf; twelve is an index

Author box

Swarnil Singhai

Salesforce Architect · 11× certified

Eleven years building on the platform, most of them cleaning up other people's triggers. Writes about the model first and the syntax second.

All posts

markup

<div class="ns-authorbox" style="max-inline-size:38rem">
  <img class="ns-authorbox__avatar" src="../assets/logo/favicon.svg" alt="">
  <div>
    <p class="ns-authorbox__name"><a href="#">Swarnil Singhai</a></p>
    <p class="ns-authorbox__role">Salesforce Architect · 11× certified</p>
    <p class="ns-authorbox__bio">Eleven years building on the platform, most of them cleaning up other people's triggers. Writes about the model first and the syntax second.</p>
    <div class="ns-authorbox__links">
      <a class="ns-btn ns-btn--outline ns-btn--sm" href="#">All posts</a>
      <a class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" href="#" aria-label="LinkedIn"><i class="ph ph-linkedin-logo" aria-hidden="true"></i></a>
      <a class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" href="#" aria-label="X"><i class="ph ph-x-logo" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

Series

"Part 3 of 6". A reader who lands on part 3 from a search result has no idea parts 1 and 2 exist unless the post says so — so it says so, and links both directions.

Part 3 of 6 · Bulk-safe Apex

Triggers, and when not to write one Collections, maps and sets Why your trigger fails at 201 records Governor limits in practice Testing at scale Deploying without fear

markup

<div class="ns-series" style="max-inline-size:26rem">
  <span class="ns-series__label">Part 3 of 6 · Bulk-safe Apex</span>
  <div class="ns-series__list">
    <a class="ns-series__item" href="#" data-state="done">Triggers, and when not to write one</a>
    <a class="ns-series__item" href="#" data-state="done">Collections, maps and sets</a>
    <span class="ns-series__item" aria-current="true">Why your trigger fails at 201 records</span>
    <a class="ns-series__item" href="#">Governor limits in practice</a>
    <a class="ns-series__item" href="#">Testing at scale</a>
    <a class="ns-series__item" href="#">Deploying without fear</a>
  </div>
</div>

Prev / next

markup

<nav class="ns-postnav" aria-label="More posts" style="inline-size:100%;max-inline-size:38rem">
  <a class="ns-postnav__link" href="#">
    <span class="ns-postnav__dir"><i class="ph ph-caret-left" aria-hidden="true"></i> Previous</span>
    <span class="ns-postnav__title">Collections, maps and sets</span>
  </a>
  <a class="ns-postnav__link ns-postnav__link--next" href="#">
    <span class="ns-postnav__dir">Next <i class="ph ph-caret-right" aria-hidden="true"></i></span>
    <span class="ns-postnav__title">Governor limits in practice</span>
  </a>
</nav>

Related shelf

Composes .ns-strip — the same scroll-snapped shelf the course pages use, because it is the same object. Four cards, not twelve.

<div class="ns-strip" style="inline-size:100%">
  <article class="ns-card ns-bcard ns-bcard--minimal"><div class="ns-card__body"><a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Flow or Apex? A decision table</h3></a><div class="ns-postmeta"><span>5 min</span></div></div></article>
  <article class="ns-card ns-bcard ns-bcard--minimal"><div class="ns-card__body"><a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Test data factories that survive a refactor</h3></a><div class="ns-postmeta"><span>7 min</span></div></div></article>
  <article class="ns-card ns-bcard ns-bcard--minimal"><div class="ns-card__body"><a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Notes on naming things</h3></a><div class="ns-postmeta"><span>3 min</span></div></div></article>
  <article class="ns-card ns-bcard ns-bcard--minimal"><div class="ns-card__body"><a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Five orgs, one pipeline</h3></a><div class="ns-postmeta"><span>11 min</span></div></div></article>
</div>

Accessibility contract

Prev and next are ordinary links whose accessible name is the post's title
A one-sided nav keeps both columns with the empty half visibility:hidden, so "next" does not slide under "previous" at the end of an archive
The series list marks the current entry with aria-current and completed ones with data-state, not colour alone