# Testimonial

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/testimonial

The `.testimonial` component is a quote with attribution: a `figure` wrapping mCSS's already-styled `blockquote`, plus an [Avatar](/components/avatar) byline. Pure HTML and CSS.

<Testimonial name="Sonny Mueller" role="Design lead, Acme">
  <p>We deleted four hundred lines of utility classes the week we switched. The cascade does the work now.</p>
</Testimonial>

<div class="docs_oversizedTable">

| File                                    | Description                           | Source      |
| --------------------------------------- | ------------------------------------- | ----------- |
| `component.testimonial.css`              | Layout + byline styles                | [Github][1] |
| `elements.text.css`                      | The `blockquote` styling (dependency) | [Github][2] |
| `Testimonial.astro`, `Avatar.astro`      | The Astro components                  | [Github][3] |
| `--testimonial-role-color` in `settings.ui.css` | Interface token                       | [Github][4] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.testimonial.css
[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.text.css
[3]: https://github.com/minimaldesign/mCSS/tree/main/src/components
[4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css

## Playground

<Playground
  client:visible
  template={`<figure class="testimonial">
  <blockquote class="testimonial_quote">
    <p>{quote}</p>
  </blockquote>
  <figcaption class="testimonial_byline">
    <div class="avatar avatar-sm">
      <div><span>{initials}</span></div>
    </div>
    <div>
      <span class="testimonial_name">{name}</span>
      <span class="testimonial_role">{role}</span>
    </div>
  </figcaption>
</figure>`}
  controls={[
    { heading: "Content", items: [
      { type: "text", name: "quote", label: "Quote", default: "We deleted four hundred lines of utility classes the week we switched." },
    ]},
    { heading: "Byline", items: [
      { type: "text", name: "name", label: "Name", default: "Sonny Mueller" },
      { type: "text", name: "role", label: "Role", default: "Design lead, Acme" },
      { type: "text", name: "initials", label: "Initials", default: "SM" },
    ]},
  ]}
/>

## HTML

```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

<div class="docs_oversizedTable">

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

</div>

The quote itself is themed by the `blockquote` element styles.

## Astro component

<div class="docs_oversizedTable">

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

</div>

The default slot is the quote.

## Examples

A wall of quotes is just testimonials on the [grid](/docs/global#grid):

<ul class="docs_examples">
  <li>

    <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>
      <Testimonial name="Sam Ortiz">
        <p>Readable class names. Imagine that.</p>
      </Testimonial>
      <Testimonial name="Mia Kim" role="Founder, Studio K">
        <p>Shipped our marketing site in a weekend.</p>
      </Testimonial>
    </div>

    ```astro
    ---
    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>
    ```

  </li>
</ul>