NS Design System
v3.0.0 · 257 tokens

91Learner testimonials

Quotes with the rating the person actually gave, and a real attribution. A testimonial with no name and no source is a sentence the marketing team wrote, and readers know it. The featured one is a pull-quote and uses the pull-quote's own device rather than inventing a second one.

Use it for

  • Below the curriculum on a course page
  • A dark band on the marketing home

Not for

  • Invented quotes, or quotes with an initial and a first name only
  • More than about six — a wall of praise reads as none

Grid, with a featured quote

5.0

The labs are the difference. Watching someone build a trigger is not the same as building one, and this course knows it.

Marcus ElleryAdmin → Developer
4.0

Wanted more on integration, but everything that is here is taught properly. Passed the ADM-201 four weeks later.

Anita FernandesConsultant
markup
<div class="ns-testimonials" style="inline-size:100%">
  <blockquote class="ns-testimonial ns-testimonial--featured">
    <p class="ns-testimonial__quote">I had done three other Apex courses and still could not explain bulkification. This one spent twenty minutes on why one record at a time fails, and it finally landed.</p>
    <footer class="ns-testimonial__who">
      <img class="ns-testimonial__avatar" src="../assets/logo/favicon.svg" alt="">
      <span>
        <span class="ns-testimonial__name">Priya Raman</span>
        <span class="ns-testimonial__role">Salesforce Developer · Bengaluru</span>
      </span>
    </footer>
  </blockquote>
  <blockquote class="ns-testimonial">
    <span class="ns-rating" data-value="5" data-of="5">
      <span class="ns-rating__value">5.0</span>
      <span class="ns-rating__stars" aria-hidden="true"><span><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i></span><span class="ns-rating__fill"><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i></span></span>
    </span>
    <p class="ns-testimonial__quote">The labs are the difference. Watching someone build a trigger is not the same as building one, and this course knows it.</p>
    <footer class="ns-testimonial__who">
      <img class="ns-testimonial__avatar" src="../assets/logo/favicon.svg" alt="">
      <span><span class="ns-testimonial__name">Marcus Ellery</span><span class="ns-testimonial__role">Admin → Developer</span></span>
    </footer>
  </blockquote>
  <blockquote class="ns-testimonial">
    <span class="ns-rating" data-value="4" data-of="5">
      <span class="ns-rating__value">4.0</span>
      <span class="ns-rating__stars" aria-hidden="true"><span><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i><i class="ph ph-star"></i></span><span class="ns-rating__fill"><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i><i class="ph-fill ph-star"></i></span></span>
    </span>
    <p class="ns-testimonial__quote">Wanted more on integration, but everything that is here is taught properly. Passed the ADM-201 four weeks later.</p>
    <footer class="ns-testimonial__who">
      <img class="ns-testimonial__avatar" src="../assets/logo/favicon.svg" alt="">
      <span><span class="ns-testimonial__name">Anita Fernandes</span><span class="ns-testimonial__role">Consultant</span></span>
    </footer>
  </blockquote>
</div>

With the result

The claim a learner is actually shopping for, in mono above the quote. A testimonial that says “great course” proves nothing; one that says “passed PD1 in nine weeks” is the whole argument.

Passed PD1 in 9 weeks
I had written Apex for a year and still could not say why my triggers broke on data loads. The bulk lesson fixed that in an afternoon.
AM Anita M.Admin → developer, Pune
markup
<figure class="ns-testimonial" style="max-inline-size:32rem">
  <span class="ns-testimonial__result"><i class="ph ph-seal-check" aria-hidden="true"></i>Passed PD1 in 9 weeks</span>
  <blockquote class="ns-testimonial__quote">I had written Apex for a year and still could not say why my triggers broke on data loads. The bulk lesson fixed that in an afternoon.</blockquote>
  <figcaption class="ns-testimonial__who">
    <span class="ns-avatar ns-testimonial__avatar">AM</span>
    <span><span class="ns-testimonial__name">Anita M.</span><span class="ns-testimonial__role">Admin → developer, Pune</span></span>
  </figcaption>
</figure>

Compact strip

--compact: one line each, three under a hero. The quote drops to the sans face because at this size the serif is a texture rather than a voice.

The labs are the reason it stuck.
RKRavi K.
First course that explained governor limits like a budget.
PJPriya J.
Short lessons, no filler, no intro music.
DNDev N.
markup
<div class="ns-testimonials" style="inline-size:100%">
  <figure class="ns-testimonial ns-testimonial--compact">
    <blockquote class="ns-testimonial__quote">The labs are the reason it stuck.</blockquote>
    <figcaption class="ns-testimonial__who"><span class="ns-avatar ns-avatar--sm ns-testimonial__avatar">RK</span><span class="ns-testimonial__name">Ravi K.</span></figcaption>
  </figure>
  <figure class="ns-testimonial ns-testimonial--compact">
    <blockquote class="ns-testimonial__quote">First course that explained governor limits like a budget.</blockquote>
    <figcaption class="ns-testimonial__who"><span class="ns-avatar ns-avatar--sm ns-testimonial__avatar">PJ</span><span class="ns-testimonial__name">Priya J.</span></figcaption>
  </figure>
  <figure class="ns-testimonial ns-testimonial--compact">
    <blockquote class="ns-testimonial__quote">Short lessons, no filler, no intro music.</blockquote>
    <figcaption class="ns-testimonial__who"><span class="ns-avatar ns-avatar--sm ns-testimonial__avatar">DN</span><span class="ns-testimonial__name">Dev N.</span></figcaption>
  </figure>
</div>

With a portrait

--media: the one testimonial a page leads with, using the taped print from Picture frames so the person reads as a person rather than as a stock avatar.

Hired as a junior developer
I built the volunteer-shift project from the course and talked through it in the interview. That was the interview.
Sana R.Bengaluru
markup
<figure class="ns-testimonial ns-testimonial--media" style="max-inline-size:36rem">
  <span class="ns-pframe ns-pframe--photo"><span class="ns-ph" aria-hidden="true"></span></span>
  <span>
    <span class="ns-testimonial__result"><i class="ph ph-seal-check" aria-hidden="true"></i>Hired as a junior developer</span>
    <blockquote class="ns-testimonial__quote">I built the volunteer-shift project from the course and talked through it in the interview. That was the interview.</blockquote>
    <figcaption class="ns-testimonial__who"><span><span class="ns-testimonial__name">Sana R.</span><span class="ns-testimonial__role">Bengaluru</span></span></figcaption>
  </span>
</figure>

Marquee

A continuous strip of short testimonials, for the band above a footer. Uses the shared Marquee — same track, same pause-on-hover, same reduced-motion stop — so this is a placement of testimonials rather than a second component. Keep the quotes to one line each: a marquee is read in passing, and a paragraph in motion is unreadable by design.

“The labs are the reason it stuck.” Ravi K. “Passed PD1 in nine weeks.” Anita M. “Short lessons, no filler, no intro music.” Dev N. “Explained governor limits like a budget.” Priya J. “The labs are the reason it stuck.” Ravi K. “Passed PD1 in nine weeks.” Anita M. “Short lessons, no filler, no intro music.” Dev N. “Explained governor limits like a budget.” Priya J.
markup
<div class="ns-marquee ns-marquee--slow" style="inline-size:100%">
  <div class="ns-marquee__track">
    <span class="ns-marquee__item">“The labs are the reason it stuck.” <b>Ravi K.</b></span>
    <span class="ns-marquee__item">“Passed PD1 in nine weeks.” <b>Anita M.</b></span>
    <span class="ns-marquee__item">“Short lessons, no filler, no intro music.” <b>Dev N.</b></span>
    <span class="ns-marquee__item">“Explained governor limits like a budget.” <b>Priya J.</b></span>
    <span class="ns-marquee__item">“The labs are the reason it stuck.” <b>Ravi K.</b></span>
    <span class="ns-marquee__item">“Passed PD1 in nine weeks.” <b>Anita M.</b></span>
    <span class="ns-marquee__item">“Short lessons, no filler, no intro music.” <b>Dev N.</b></span>
    <span class="ns-marquee__item">“Explained governor limits like a budget.” <b>Priya J.</b></span>
  </div>
</div>

Accessibility contract

  • Each quote is a real <blockquote> with a <cite>-carrying footer
  • The rating's number is text; the stars are aria-hidden decoration over it