---
url: /api/css/testimonial.md
---
# CSS: testimonial

`div[class~="instui-testimonial"]` — Quote or testimonial display with attribution and optional imagery.

✅ Use Testimonial when:

* Displaying customer or user testimonials and quotes

* You want to highlight a statement with visual emphasis

* Attribution and context (name, title, image) are important
  🚫 Don't use Testimonial when:

* Displaying inline quotes in body text — use a blockquote element instead

* The statement is the main focus — use Hero or Card instead

## Accessibility

* Use `<blockquote>` semantically for the quote
* Ensure attribution is clear and associated with the quote
* If using images, provide alt text

## Usage

```css
@import "@pantoken/plugin-layouts/layouts.css";
```

## Examples

-automatica11y -nocard

```html
<div class="instui-testimonial" data-a11y-root>
  <blockquote class="instui-content">
    <p class="instui-quote">The course helped me understand the material.</p>
    <footer><p class="instui-author">Jordan Lee</p><p class="instui-title">Student</p></footer>
  </blockquote>
</div>
```

## Parts

| Part | Description |
| --- | --- |
| `.instui-author` | Attribution author name. |
| `.instui-avatar` | Optional author profile image. |
| `.instui-content` | Container for quote and attribution. |
| `.instui-quote` | The quoted text. |
| `.instui-title` | Optional author title or affiliation. |

## States

| State | Description |
| --- | --- |
| `:optional` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-color-background` | — | — |
| `--instui-color-primary` | — | — |
| `--instui-color-surface` | — | — |
| `--instui-color-text-primary` | — | — |
| `--instui-color-text-secondary` | — | — |
| `--instui-font-size-small` | `<length>` | — |
| `--instui-font-weight-semibold` | — | — |
| `--instui-radius-medium` | — | — |
| `--instui-space-large` | — | — |
| `--instui-space-medium` | — | — |
| `--instui-space-small` | — | — |

## Related

* [card](/api/css/card.md)