Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Testimonials
Page sections

Testimonials

Quote cards, responsive grids, and swipeable testimonial sliders. Ready to compose with CSS only.

CSS only4 examplesKeyboard friendly HTML

Featured testimonial card

An editorial quote with a clear attribution. All names and quotes on this page are fictional examples.

Live preview

Sample testimonial

“The spacing and typography gave our prototype a clear rhythm from the very first screen.”

Maya Chen

Product designer · North Studio

View HTML / PlaygroundHTML source
example.htmlHTML
<figure class="sl-card sl-stack sl-gap-6">
  <p class="sl-help">Sample testimonial</p>
  <blockquote>
    <p>
      “The spacing and typography gave our prototype a clear rhythm from the very first
      screen.”
    </p>
  </blockquote>
  <figcaption class="sl-cluster sl-gap-4">
    <span class="sl-badge" aria-hidden="true">MC</span>
    <div>
      <p><strong>Maya Chen</strong></p>
      <p class="sl-help">Product designer · North Studio</p>
    </div>
  </figcaption>
</figure>
HTML source · enable JavaScript for the playground16 lines · UTF-8

Normal testimonial card grid

One column on phones, two from 768px, and three from 1024px. Optional motion adds a gentle hover lift.

Live preview

Sample testimonial

“The spacing and typography gave our prototype a clear rhythm from the very first screen.”

Maya Chen

Product designer · North Studio

Sample testimonial

“I could compose a clean interface with familiar HTML and just the CSS modules I needed.”

Alex Morgan

Frontend developer · Fieldwork

Sample testimonial

“The same cards feel considered in both themes, with room for our own visual identity.”

Priya Shah

Creative lead · Paper & Form

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-grid sl-md:cols-2 sl-lg:cols-3 sl-gap-6">
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “The spacing and typography gave our prototype a clear rhythm from the very
        first screen.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">MC</span>
      <div>
        <p><strong>Maya Chen</strong></p>
        <p class="sl-help">Product designer · North Studio</p>
      </div>
    </figcaption>
  </figure>
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “I could compose a clean interface with familiar HTML and just the CSS modules I
        needed.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">AM</span>
      <div>
        <p><strong>Alex Morgan</strong></p>
        <p class="sl-help">Frontend developer · Fieldwork</p>
      </div>
    </figcaption>
  </figure>
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “The same cards feel considered in both themes, with room for our own visual
        identity.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">PS</span>
      <div>
        <p><strong>Priya Shah</strong></p>
        <p class="sl-help">Creative lead · Paper & Form</p>
      </div>
    </figcaption>
  </figure>
</div>
HTML source · enable JavaScript for the playground50 lines · UTF-8

Testimonial slider

One quote per slide. Swipe, use the numbered links, or focus the track and use the arrow keys. There is no autoplay.

Live preview

Sample testimonial

“The spacing and typography gave our prototype a clear rhythm from the very first screen.”

Maya Chen

Product designer · North Studio

Sample testimonial

“I could compose a clean interface with familiar HTML and just the CSS modules I needed.”

Alex Morgan

Frontend developer · Fieldwork

Sample testimonial

“The same cards feel considered in both themes, with room for our own visual identity.”

Priya Shah

Creative lead · Paper & Form

View HTML / PlaygroundHTML source
example.htmlHTML
<section
  class="sl-slider"
  aria-label="Sample testimonials"
  aria-roledescription="carousel"
>
  <div
    class="sl-slider__track"
    tabindex="0"
    role="group"
    aria-label="Testimonial slides. Swipe or focus here and use arrow keys."
  >
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-1"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="1 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The spacing and typography gave our prototype a clear rhythm from the very
          first screen.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">MC</span>
        <div>
          <p><strong>Maya Chen</strong></p>
          <p class="sl-help">Product designer · North Studio</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-2"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="2 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “I could compose a clean interface with familiar HTML and just the CSS modules
          I needed.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">AM</span>
        <div>
          <p><strong>Alex Morgan</strong></p>
          <p class="sl-help">Frontend developer · Fieldwork</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-3"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="3 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The same cards feel considered in both themes, with room for our own visual
          identity.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">PS</span>
        <div>
          <p><strong>Priya Shah</strong></p>
          <p class="sl-help">Creative lead · Paper & Form</p>
        </div>
      </figcaption>
    </figure>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a testimonial">
    <a href="#testimonial-1" aria-label="Read sample testimonial from Maya Chen">1</a
    ><a href="#testimonial-2" aria-label="Read sample testimonial from Alex Morgan">2</a
    ><a href="#testimonial-3" aria-label="Read sample testimonial from Priya Shah">3</a>
  </nav>
</section>
HTML source · enable JavaScript for the playground87 lines · UTF-8

Testimonial card rail

A horizontal card collection with a peek at the next card on mobile and two cards visible on larger screens.

Live preview

Sample testimonial

“The spacing and typography gave our prototype a clear rhythm from the very first screen.”

Maya Chen

Product designer · North Studio

Sample testimonial

“I could compose a clean interface with familiar HTML and just the CSS modules I needed.”

Alex Morgan

Frontend developer · Fieldwork

Sample testimonial

“The same cards feel considered in both themes, with room for our own visual identity.”

Priya Shah

Creative lead · Paper & Form

View HTML / PlaygroundHTML source
example.htmlHTML
<section
  class="sl-slider sl-slider--cards"
  aria-label="Sample testimonials"
  aria-roledescription="carousel"
>
  <div
    class="sl-slider__track"
    tabindex="0"
    role="group"
    aria-label="Testimonial slides. Swipe or focus here and use arrow keys."
  >
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-rail-1"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="1 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The spacing and typography gave our prototype a clear rhythm from the very
          first screen.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">MC</span>
        <div>
          <p><strong>Maya Chen</strong></p>
          <p class="sl-help">Product designer · North Studio</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-rail-2"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="2 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “I could compose a clean interface with familiar HTML and just the CSS modules
          I needed.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">AM</span>
        <div>
          <p><strong>Alex Morgan</strong></p>
          <p class="sl-help">Frontend developer · Fieldwork</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="testimonial-rail-3"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="3 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The same cards feel considered in both themes, with room for our own visual
          identity.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">PS</span>
        <div>
          <p><strong>Priya Shah</strong></p>
          <p class="sl-help">Creative lead · Paper & Form</p>
        </div>
      </figcaption>
    </figure>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a testimonial">
    <a href="#testimonial-rail-1" aria-label="Read sample testimonial from Maya Chen"
      >1</a
    ><a href="#testimonial-rail-2" aria-label="Read sample testimonial from Alex Morgan"
      >2</a
    ><a href="#testimonial-rail-3" aria-label="Read sample testimonial from Priya Shah"
      >3</a
    >
  </nav>
</section>
HTML source · enable JavaScript for the playground91 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.