Skip to content

component :: Testimonial

The .testimonial component is a quote with attribution: a figure wrapping mCSS’s already-styled blockquote, plus an Avatar byline. Pure HTML and CSS.

We deleted four hundred lines of utility classes the week we switched. The cascade does the work now.

Sonny MuellerDesign lead, Acme
File Description Source
component.testimonial.css Layout + byline styles Github
elements.text.css The blockquote styling (dependency) Github
Testimonial.astro, Avatar.astro The Astro components Github
--testimonial-role-color in settings.ui.css Interface token Github

Playground

We deleted four hundred lines of utility classes the week we switched.

SM
Sonny Mueller Design lead, Acme

Content

Byline

Copied!
<figure class="testimonial">
<blockquote class="testimonial_quote">
  <p>We deleted four hundred lines of utility classes the week we switched.</p>
</blockquote>
<figcaption class="testimonial_byline">
  <div class="avatar avatar-sm">
    <div><span>SM</span></div>
  </div>
  <div>
    <span class="testimonial_name">Sonny Mueller</span>
    <span class="testimonial_role">Design lead, Acme</span>
  </div>
</figcaption>
</figure>

HTML

<figure class="testimonial">
  <blockquote class="testimonial_quote">
    <p>We deleted four hundred lines of utility classes the week we switched.</p>
  </blockquote>
  <figcaption class="testimonial_byline">
    <!-- avatar markup, see the Avatar docs -->
    <div>
      <span class="testimonial_name">Sonny Mueller</span>
      <span class="testimonial_role">Design lead, Acme</span>
    </div>
  </figcaption>
</figure>

Custom properties

Property Description
--testimonial-role-color Role text color.

The quote itself is themed by the blockquote element styles.

Astro component

Prop Type Default Description
name string — Who said it. Required (also feeds the Avatar initials when there is no photo).
role string undefined Title/company line.
avatarSrc ImageMetadata | string undefined Photo for the Avatar.
class string undefined Additional CSS classes.

The default slot is the quote.

Examples

A wall of quotes is just testimonials on the grid: