# 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 Rollins" 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 Rollins" },
        {
          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 Rollins</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>