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 Mueller Design 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 default theme	Theme token	Github

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:

The copy-paste model means I actually own my components.

Ada Chen Freelance

Readable class names. Imagine that.

Sam Ortiz

Shipped our marketing site in a weekend.

Mia Kim Founder, Studio K

---
import Testimonial from "../components/Testimonial.astro";
---
<div class="grid" col="1" col-md="3">
  <Testimonial name="Ada Chen" role="Freelance">
    <p>The copy-paste model means I actually own my components.</p>
  </Testimonial>
  <!-- … -->
</div>