Robert Birming

Testimonials styles

  1. Bear Blog library
  2. Add-ons

A tidy way to display a handful of quotes side by side. Works well for feedback, reviews, or kind words from readers.

Each quote sits in its own card, with the author's name pulled out below.

Preview

Testimonials grid, quotes displayed as cards with author names below

How to use

Wrap each quote in a blockquote and end it with a <cite> tag, then place them inside a container using the testimonials class.1

Markup

<div class="testimonials">

> Quote text here. <cite>Name</cite>

> Quote with a link. <cite><a href="https://example.com">Name</a></cite>

</div>

Styles

/* Testimonials styles | robertbirming.com */

.testimonials {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-block: 1.5rem;
}

.testimonials blockquote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding-block-start: 1.5rem;
  padding-block-end: 1.2rem;
  padding-inline: 1.3rem;
  background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
  border-radius: 8px;
  font-style: normal;
  overflow: hidden;
}

.testimonials blockquote p {
  margin: 0;
  margin-block-start: 0.6rem;
  color: var(--text-color);
  font-size: calc(var(--font-scale) * 0.92);
  line-height: 1.6;
}

.testimonials blockquote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.8rem;
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--text-color), transparent 88%);
  pointer-events: none;
}

.testimonials cite {
  display: block;
  margin-block-start: 1.1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px dashed color-mix(in srgb, var(--text-color), transparent 82%);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
  font-family: monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonials cite a {
  color: inherit;
  text-decoration: none;
}

Happy blogging, and may the kind words keep coming.

Want more? Check out the full Bear Blog library.

  1. Bear renders blockquotes with a <p> tag inside, so the <cite> goes at the end of the quote text, separated by a space.↩