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
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.
The labs are the difference. Watching someone build a trigger is not the same as building one, and this course knows it.
Wanted more on integration, but everything that is here is taught properly. Passed the ADM-201 four weeks later.
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.
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.
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.
First course that explained governor limits like a budget.
Short lessons, no filler, no intro music.
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.
I built the volunteer-shift project from the course and talked through it in the interview. That was the interview.
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.
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