92Instructor

The author module — one instructor or several. With several, each gets the same block: a course with two instructors has two instructors, and shrinking the second one is an editorial claim the layout should not be making. The stats line is the credential — courses taught, learners, rating — in mono, because it is data.

Use it for

Below the curriculum on a course page
An instructor's own profile page

Not for

A byline on a blog post — that is Author box (CMS)
A team page — that is a card grid

One instructor

Swarnil Singhai

Salesforce Architect · 11× certified

4.8 instructor rating 24,100 learners 9 courses

Eleven years building on the platform, most of them cleaning up other people's triggers. Teaches the way he wishes it had been taught to him: the model first, the syntax second.

All 9 courses Profile

markup

<div class="ns-instructor" style="max-inline-size:40rem">
  <img class="ns-instructor__avatar" src="../assets/logo/favicon.svg" alt="">
  <div>
    <p class="ns-instructor__name">Swarnil Singhai</p>
    <p class="ns-instructor__role">Salesforce Architect · 11× certified</p>
    <div class="ns-instructor__stats">
      <span><i class="ph ph-star" aria-hidden="true"></i>4.8 instructor rating</span>
      <span><i class="ph ph-users-three" aria-hidden="true"></i>24,100 learners</span>
      <span><i class="ph ph-books" aria-hidden="true"></i>9 courses</span>
    </div>
    <p class="ns-instructor__bio">Eleven years building on the platform, most of them cleaning up other people's triggers. Teaches the way he wishes it had been taught to him: the model first, the syntax second.</p>
    <div style="margin-block-start:var(--space-4);display:flex;gap:var(--space-2)">
      <a class="ns-btn ns-btn--outline ns-btn--sm" href="#">All 9 courses</a>
      <a class="ns-btn ns-btn--quiet ns-btn--sm" href="#">Profile</a>
    </div>
  </div>
</div>

Two instructors

Equal blocks. Ranking co-instructors by layout is a claim about them that the page should not be making silently.

Swarnil Singhai

Architecture & Apex

9 courses24,100

Priya Raman

Flows & automation

4 courses9,300

markup

<div class="ns-instructors" style="inline-size:100%">
  <div class="ns-instructor">
    <img class="ns-instructor__avatar" src="../assets/logo/favicon.svg" alt="">
    <div>
      <p class="ns-instructor__name">Swarnil Singhai</p>
      <p class="ns-instructor__role">Architecture &amp; Apex</p>
      <div class="ns-instructor__stats"><span><i class="ph ph-books" aria-hidden="true"></i>9 courses</span><span><i class="ph ph-users-three" aria-hidden="true"></i>24,100</span></div>
    </div>
  </div>
  <div class="ns-instructor">
    <img class="ns-instructor__avatar" src="../assets/logo/favicon.svg" alt="">
    <div>
      <p class="ns-instructor__name">Priya Raman</p>
      <p class="ns-instructor__role">Flows &amp; automation</p>
      <div class="ns-instructor__stats"><span><i class="ph ph-books" aria-hidden="true"></i>4 courses</span><span><i class="ph ph-users-three" aria-hidden="true"></i>9,300</span></div>
    </div>
  </div>
</div>

Outcomes & includes

"What you'll learn" and "Requirements" are the same list at two tones — two columns where there is room, because a single column of eight one-line items is a very tall list of very short lines.

What you'll learn

Write a trigger that survives a 200-record data load.
Read a governor-limit error and know which line caused it.
Query selectively, and know when an index is being used.
Deploy with SFDX, with 75%+ coverage that means something.

Requirements

A free Developer org — we set one up in lesson 01.
No prior Apex. Experience with any programming language helps.

markup

<div style="display:grid;gap:var(--space-8);inline-size:100%">
  <div>
    <p class="ns-kicker">What you'll learn</p>
    <ul class="ns-outcomes">
      <li><i class="ph ph-check-circle" aria-hidden="true"></i><span>Write a trigger that survives a 200-record data load.</span></li>
      <li><i class="ph ph-check-circle" aria-hidden="true"></i><span>Read a governor-limit error and know which line caused it.</span></li>
      <li><i class="ph ph-check-circle" aria-hidden="true"></i><span>Query selectively, and know when an index is being used.</span></li>
      <li><i class="ph ph-check-circle" aria-hidden="true"></i><span>Deploy with SFDX, with 75%+ coverage that means something.</span></li>
    </ul>
  </div>
  <div>
    <p class="ns-kicker">Requirements</p>
    <ul class="ns-outcomes ns-outcomes--plain ns-outcomes--single">
      <li><i class="ph ph-circle" aria-hidden="true"></i><span>A free Developer org — we set one up in lesson 01.</span></li>
      <li><i class="ph ph-circle" aria-hidden="true"></i><span>No prior Apex. Experience with any programming language helps.</span></li>
    </ul>
  </div>
</div>

Two instructors

--pair: equal blocks. A course written by two people has two authors, and shrinking the second one is an editorial claim the layout should not be making.

Swarnil Singhai

Platform architect · 9 years

Writes the Apex and integration tracks. Has deployed to orgs with more triggers than tests, and would like that to stop.

Rahul Sharma

Admin lead · 6 years

Writes the admin and flow tracks, and the labs that make you build the thing rather than watch it.

markup

<div class="ns-instructors ns-instructors--pair" style="inline-size:100%">
  <div class="ns-instructor">
    <span class="ns-avatar ns-avatar--lg ns-instructor__avatar">SW</span>
    <div>
      <p class="ns-instructor__name">Swarnil Singhai</p>
      <p class="ns-instructor__role">Platform architect · 9 years</p>
      <p class="ns-instructor__bio">Writes the Apex and integration tracks. Has deployed to orgs with more triggers than tests, and would like that to stop.</p>
    </div>
  </div>
  <div class="ns-instructor">
    <span class="ns-avatar ns-avatar--lg ns-instructor__avatar">RS</span>
    <div>
      <p class="ns-instructor__name">Rahul Sharma</p>
      <p class="ns-instructor__role">Admin lead · 6 years</p>
      <p class="ns-instructor__bio">Writes the admin and flow tracks, and the labs that make you build the thing rather than watch it.</p>
    </div>
  </div>
</div>

Byline

Attribution rather than biography: the avatar stack plus names that read as a sentence. For a card foot, a lesson header, a blog post — anywhere the authors are a credit rather than a section.

SW RS Swarnil and Rahul SW RS +2 Swarnil, Rahul and two more SW RS Written by Swarnil and Rahul · updated Jan 2026

markup

<div style="display:flex;flex-direction:column;gap:var(--space-4)">
  <span class="ns-byline">
    <span class="ns-avatar-stack">
      <span class="ns-avatar ns-avatar--sm">SW</span>
      <span class="ns-avatar ns-avatar--sm">RS</span>
    </span>
    <span class="ns-byline__names"><b>Swarnil</b> and <b>Rahul</b></span>
  </span>
  <span class="ns-byline">
    <span class="ns-avatar-stack">
      <span class="ns-avatar ns-avatar--sm">SW</span>
      <span class="ns-avatar ns-avatar--sm">RS</span>
      <span class="ns-avatar ns-avatar--sm ns-avatar--more">+2</span>
    </span>
    <span class="ns-byline__names"><b>Swarnil</b>, <b>Rahul</b> and two more</span>
  </span>
  <span class="ns-byline ns-byline--stack">
    <span class="ns-avatar-stack">
      <span class="ns-avatar ns-avatar--sm">SW</span>
      <span class="ns-avatar ns-avatar--sm">RS</span>
    </span>
    <span class="ns-byline__names">Written by <b>Swarnil</b> and <b>Rahul</b> · updated Jan 2026</span>
  </span>
</div>

Accessibility contract

The avatar is decorative (alt=""); the name beside it is the content
Stat glyphs are aria-hidden and every figure is also a word