NS Design System
v3.0.0 · 257 tokens

106Post card

The post, as a card. Composes .ns-card and adds the blog's own parts: a cover with the category riding it, a balanced title, a two-line clamped excerpt, and the meta line every post carries. Five shapes over one anatomy — a post in the index, in a related shelf, in a sidebar and as the one featured piece is the same object at four sizes, and four bespoke cards is how the meta rows drift apart.

Use it for

  • The blog index grid
  • A related-posts shelf (compose into .ns-strip)
  • --minimal in a sidebar or a dense archive list
  • --wide for the ONE featured post at the top of an index

Not for

  • A course — that is Course card, which carries price and level
  • An index of twenty --wide cards. Featured means one

Default

markup
<article class="ns-card ns-bcard" style="max-inline-size:19rem">
  <span class="ns-bcard__cover">
    <span class="ns-card__media ns-ph" aria-hidden="true"></span>
    <span class="ns-tag ns-bcard__cat">Apex</span>
  </span>
  <div class="ns-card__body">
    <a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Why your trigger fails at 201 records</h3></a>
    <p class="ns-bcard__excerpt">Governor limits are per transaction, not per record — and the fix is a pattern, not a setting.</p>
    <div class="ns-postmeta">
      <span><img class="ns-postmeta__avatar" src="../assets/logo/favicon.svg" alt=""><span class="ns-postmeta__author">Swarnil Singhai</span></span>
      <span><time datetime="2026-08-04">4 Aug 2026</time></span>
      <span>6 min read</span>
    </div>
  </div>
</article>

Featured, row and minimal

--wide is the one featured piece: two columns, a display-scale title, three lines of excerpt. --row is the archive and search-result shape. --minimal drops the cover and the frame entirely — for a sidebar, where a column of small cover images is texture rather than information.

Architecture

The data model is the product

Every automation problem I have been called in to fix was a schema problem wearing a costume. Here is how to tell the difference before you write a line of Apex.

Swarnil Singhai 12 min read
markup
<div style="display:grid;gap:var(--space-6);inline-size:100%">
  <article class="ns-card ns-bcard ns-bcard--wide">
    <span class="ns-bcard__cover">
      <span class="ns-ph" aria-hidden="true"></span>
      <span class="ns-tag ns-bcard__cat">Architecture</span>
    </span>
    <div class="ns-card__body">
      <a class="ns-card__link" href="#"><h3 class="ns-bcard__title">The data model is the product</h3></a>
      <p class="ns-bcard__excerpt">Every automation problem I have been called in to fix was a schema problem wearing a costume. Here is how to tell the difference before you write a line of Apex.</p>
      <div class="ns-postmeta">
        <span><img class="ns-postmeta__avatar" src="../assets/logo/favicon.svg" alt=""><span class="ns-postmeta__author">Swarnil Singhai</span></span>
        <span><time datetime="2026-07-28">28 Jul 2026</time></span>
        <span>12 min read</span>
      </div>
    </div>
  </article>

  <article class="ns-card ns-bcard ns-bcard--row" style="max-inline-size:34rem">
    <span class="ns-bcard__cover"><span class="ns-ph" aria-hidden="true"></span></span>
    <div class="ns-card__body">
      <a class="ns-card__link" href="#"><h3 class="ns-bcard__title">SOQL: what the query planner actually does</h3></a>
      <p class="ns-bcard__excerpt">Selectivity, indexes, and why your report times out at 50,000 rows.</p>
      <div class="ns-postmeta"><span><time datetime="2026-07-14">14 Jul 2026</time></span><span>9 min read</span></div>
    </div>
  </article>

  <div style="max-inline-size:20rem">
    <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><time datetime="2026-07-02">2 Jul 2026</time></span><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><time datetime="2026-06-19">19 Jun 2026</time></span><span>7 min</span></div>
      </div>
    </article>
  </div>
</div>

Overlay, and no cover art

--overlay sets the title on the image, scrimmed to the brand navy. The empty-cover state is the honest alternative to a grey rectangle pretending an image failed to load — most posts have no art, and saying so with the system's own glyph is better than faking one.

markup
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);max-inline-size:38rem">
  <article class="ns-card ns-bcard ns-bcard--overlay">
    <span class="ns-bcard__cover"><span class="ns-ph" aria-hidden="true"></span></span>
    <div class="ns-card__body">
      <a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Five orgs, one deployment pipeline</h3></a>
      <div class="ns-postmeta"><span><time datetime="2026-06-30">30 Jun 2026</time></span><span>11 min read</span></div>
    </div>
  </article>
  <article class="ns-card ns-bcard">
    <span class="ns-bcard__cover ns-bcard__cover--empty" aria-hidden="true"><i class="ph ph-article"></i></span>
    <div class="ns-card__body">
      <a class="ns-card__link" href="#"><h3 class="ns-bcard__title">Notes on naming things</h3></a>
      <p class="ns-bcard__excerpt">A short argument for boring, predictable API names.</p>
      <div class="ns-postmeta"><span><time datetime="2026-06-11">11 Jun 2026</time></span><span>3 min read</span></div>
    </div>
  </article>
</div>

Accessibility contract

  • The title link is stretched over the whole card, so there is exactly one link and the whole surface is its target
  • The cover is decorative (alt="") — the title beside it is the content, and describing the same thing twice is noise
  • The excerpt is clamped with -webkit-line-clamp, which hides overflow visually but keeps the full text in the accessible name of nothing — it is not the link's name, the title is
  • --overlay carries a scrim that is not optional: a title over an arbitrary photograph has no contrast guarantee