Robert Birming

Testimonials styles

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 {
  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;
}

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.↩