Testimonials

Testimonials displays customer quotes as social proof — in a static grid, an auto-playing carousel, or a continuous marquee. Each card carries a quote, author details, an avatar, a star rating, and optional verified-source badges.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Testimonials. It starts with a few cards. Each testimonial is its own inner block, so you add and remove them like any other blocks.

Testimonial cards

Each card has:

• Quote — the testimonial text
• Name, Role, and Company — the author's details
• Avatar — upload an image, or leave it empty to show colored initials generated from the name
• Rating — 0–5 with half-star precision
• Date — optional review date
• Source — Google, Trustpilot, G2, Capterra, or a custom label, with an optional Verified badge
• Link — optional URL that makes the whole card clickable, with an open-in-new-tab option

Layout

Choose a Layout:

• Grid — a static responsive grid. Set Columns, Gap, and Stack on mobile to collapse to one column.
• Carousel — a sliding track with Autoplay and Autoplay delay, Transition speed, Loop, Pause on hover, Show arrows, and Show dots
• Marquee — a continuous scroll with Scroll duration, Reverse direction, and Pause on hover

Columns, Gap, and Card content gap are all per-device — a three-across grid on desktop can drop to two on tablet without a second block.

Avatar

Position places the avatar Top or Left of the text; Shape is Circle, Rounded, or Square. Size lives in Styles → Avatar.

Content

• Show rating — the star row
• Show quote icon — the decorative quotation mark

Read more

Clamp long quotes truncates to a set number of Lines with an expand control, so one unusually long testimonial doesn't stretch an entire grid row.

Review schema

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the block does; Styles is how it looks, organised by the parts you can see.

Styling

Ten parts is the most of any Axiom block, and it's deliberate: a testimonial card has ten things a designer will want to touch independently.

• Card is the only stateful part. Its Hover state covers background, border, and radius, and Hover lift is a dedicated range — how far the card rises on hover, in pixels.
• Monogram styles the colored initials shown when a testimonial has no avatar image. Previously these took whatever the block generated; now the background, text color, and typography are yours.
• Quote, Name, Role, and Company are four independent text parts, each with its own color and full typography.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

<div
  class="ab-testimonials ab-testimonials--carousel ab-testimonials--avatar-top ab-testimonials--shape-circle"
  data-layout="carousel"
  data-columns="3"
  data-autoplay="1"
>
  <div class="ab-testimonial">
    <span class="ab-testimonial__quote-icon"><svg>…</svg></span>
    <div class="ab-testimonial__rating" role="img" aria-label="Rated 4.5 out of 5">…</div>
    <blockquote class="ab-testimonial__quote">Absolutely brilliant product.</blockquote>
    <div class="ab-testimonial__person">
      <span class="ab-testimonial__avatar"><img src="…" alt="Jane Doe" loading="lazy" /></span>
      <span class="ab-testimonial__identity">
        <span class="ab-testimonial__name">Jane Doe</span>
        <span class="ab-testimonial__author-line">
          <span class="ab-testimonial__role">CTO</span>
          <span class="ab-testimonial__company">Acme</span>
        </span>
      </span>
    </div>
  </div>
</div>

Carousel and marquee behavior is driven by the data-* attributes on the wrapper. Card styling, rating color, and the text-part colors are --ab-tst-* custom properties. Per-device columns, gaps, and avatar size are emitted as scoped media-query rules rather than inline values. When review schema is enabled, a <script type="application/ld+json"> with the AggregateRating data is printed after the block.