146Feature grid

3-up hairline cards: an icon, the mono index, a name, two lines of why. The standard “what you get” band — hover is the top accent line, same as every card.

Use it for

3–6 reasons/capabilities on a landing page
Bespoke .ns-icon glyphs or Phosphor — same size, same color rules

Not for

Feature lists longer than 6 — that is documentation, use a docs page
Cards that link somewhere — use CourseCard/ResourceCard grammar instead

Three up

One roadmap

Admin to developer in an explicit order.

Hands-on labs

Every section ends in your own org.

Cert-aligned

Studying here counts twice.

markup

<div class="ns-features">
  <article class="ns-feature">
    <div class="ns-feature__top"><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-roadmap"/></svg><span class="ns-feature__num">01</span></div>
    <h3 class="ns-feature__name">One roadmap</h3>
    <p class="ns-feature__text">Admin to developer in an explicit order.</p>
  </article>
  <article class="ns-feature">
    <div class="ns-feature__top"><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-lesson-lab"/></svg><span class="ns-feature__num">02</span></div>
    <h3 class="ns-feature__name">Hands-on labs</h3>
    <p class="ns-feature__text">Every section ends in your own org.</p>
  </article>
  <article class="ns-feature">
    <div class="ns-feature__top"><svg class="ns-icon" aria-hidden="true"><use href="../icons/namaste-icons.svg#ns-i-certificate"/></svg><span class="ns-feature__num">03</span></div>
    <h3 class="ns-feature__name">Cert-aligned</h3>
    <p class="ns-feature__text">Studying here counts twice.</p>
  </article>
</div>