# Testimonials / Testimonios

> Three quotes with initials, name and role.

Page: https://componentes-lovat.vercel.app/c/testimonials/  
License: MIT · Design: Tailark mist (MIT) · testimonials/two  
Requires: tokens.css  
Context: landing · Density: media · Tone: editorial

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/testimonials/testimonials.html
- CSS: https://componentes-lovat.vercel.app/raw/testimonials/testimonials.css
- Everything in one file: https://componentes-lovat.vercel.app/r/testimonials.html

Dark theme: add class `dark` to `<html>`.

## When to use

- To show real customer opinions.

## When not to use

- With made-up quotes: the examples are placeholders.

## Accessibility

Roles: figure, blockquote

- Each quote is a figure with blockquote and figcaption.

## Editable parts

Marked with `data-parte` in the HTML.
- `titulo` (texto): Headline
- `frase` (texto) · can be hidden: Subtitle
- `t1-texto` (texto): Testimonial 1 · quote
- `t1-avatar` (imagen): Testimonial 1 · photo
- `t1-nombre` (texto): Testimonial 1 · name
- `t1-rol` (texto) · can be hidden: Testimonial 1 · role
- `t2-texto` (texto): Testimonial 2 · quote
- `t2-avatar` (imagen): Testimonial 2 · photo
- `t2-nombre` (texto): Testimonial 2 · name
- `t2-rol` (texto) · can be hidden: Testimonial 2 · role
- `t3-texto` (texto): Testimonial 3 · quote
- `t3-avatar` (imagen): Testimonial 3 · photo
- `t3-nombre` (texto): Testimonial 3 · name
- `t3-rol` (texto) · can be hidden: Testimonial 3 · role

## Code

```html
<section class="s-testimonials" aria-labelledby="testimonials-title">
  <div class="s-testimonials__inner">
    <div class="s-testimonials__head">
      <h2 class="s-testimonials__title" id="testimonials-title" data-parte="titulo">Lo que dicen quienes lo usan</h2>
      <p class="s-testimonials__lead" data-parte="frase">Testimonios de ejemplo: reemplázalos por los de tus clientes.</p>
    </div>
    <ul class="s-testimonials__grid">
      <li><figure class="s-testimonials__fig"><blockquote class="s-testimonials__quote"><p class="s-testimonials__text" data-parte="t1-texto">Armé la landing de mi estudio en una tarde. Todo encaja y se ve cuidado.</p></blockquote><figcaption class="s-testimonials__who"><span class="s-testimonials__avatar" data-parte="t1-avatar" aria-hidden="true">LP</span><span class="s-testimonials__name" data-parte="t1-nombre">Lucía Paredes</span><span class="s-testimonials__dot" aria-hidden="true"></span><span class="s-testimonials__role" data-parte="t1-rol">Diseñadora</span></figcaption></figure></li>
      <li><figure class="s-testimonials__fig"><blockquote class="s-testimonials__quote"><p class="s-testimonials__text" data-parte="t2-texto">Por fin componentes que funcionan con teclado sin pelearme con ellos.</p></blockquote><figcaption class="s-testimonials__who"><span class="s-testimonials__avatar" data-parte="t2-avatar" aria-hidden="true">MQ</span><span class="s-testimonials__name" data-parte="t2-nombre">Mateo Quispe</span><span class="s-testimonials__dot" aria-hidden="true"></span><span class="s-testimonials__role" data-parte="t2-rol">Desarrollador frontend</span></figcaption></figure></li>
      <li><figure class="s-testimonials__fig"><blockquote class="s-testimonials__quote"><p class="s-testimonials__text" data-parte="t3-texto">Copiar y pegar, cambiar dos colores y listo. Así de simple.</p></blockquote><figcaption class="s-testimonials__who"><span class="s-testimonials__avatar" data-parte="t3-avatar" aria-hidden="true">AT</span><span class="s-testimonials__name" data-parte="t3-nombre">Ana Torres</span><span class="s-testimonials__dot" aria-hidden="true"></span><span class="s-testimonials__role" data-parte="t3-rol">Fundadora</span></figcaption></figure></li>
    </ul>
  </div>
</section>
```

```css
/* testimonials · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde testimonials.tw.json. No editar a mano. Necesita tokens.css. */
.s-testimonials__inner{container-type:inline-size;margin-inline:auto}
.s-testimonials__lead{margin-block:calc(var(--spacing)*4)}
.s-testimonials__who{margin-top:calc(var(--spacing)*4)}
.s-testimonials__head{margin-bottom:calc(var(--spacing)*12)}
.s-testimonials__who{display:flex}
.s-testimonials__grid{display:grid}
.s-testimonials__dot{width:var(--spacing);height:var(--spacing)}
.s-testimonials__avatar{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}
.s-testimonials__inner{width:100%;max-width:var(--container-5xl)}
.s-testimonials__who{align-items:center;gap:calc(var(--spacing)*2)}
.s-testimonials__grid{gap:calc(var(--spacing)*6)}
.s-testimonials__quote{border-radius:var(--radius-2xl)}
.s-testimonials__dot{border-radius:3.40282e38px}
.s-testimonials__quote{border-bottom-left-radius:.25rem;border-style:var(--tw-border-style);border-width:1px}
.s-testimonials__avatar{border-style:var(--tw-border-style);border-width:1px}
.s-testimonials__quote{border-color:#0000}
.s-testimonials__avatar{border-color:#0000}
.s-testimonials__quote{background-color:var(--color-background)}
.s-testimonials__dot{background-color:var(--color-foreground)}
@supports (color:color-mix(in lab, red, red)){
.s-testimonials__dot{background-color:color-mix(in oklab,var(--color-foreground)25%,transparent)}
}
.s-testimonials{background-color:var(--color-muted)}
.s-testimonials__quote{padding-inline:calc(var(--spacing)*4)}
.s-testimonials__inner{padding-inline:calc(var(--spacing)*6)}
.s-testimonials__quote{padding-block:calc(var(--spacing)*3)}
.s-testimonials{padding-block:calc(var(--spacing)*24)}
.s-testimonials__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-testimonials__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.s-testimonials__name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.s-testimonials__role{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.s-testimonials__name{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-testimonials__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.s-testimonials__lead{text-wrap:balance}
.s-testimonials__title{color:var(--color-foreground)}
.s-testimonials__text{color:var(--color-foreground)}
.s-testimonials__name{color:var(--color-foreground)}
.s-testimonials__lead{color:var(--color-muted-foreground)}
.s-testimonials__role{color:var(--color-muted-foreground)}
.s-testimonials__avatar{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.s-testimonials__quote{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.s-testimonials__avatar{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.s-testimonials__quote{--tw-ring-color:var(--color-foreground)}
.s-testimonials__avatar{--tw-ring-color:var(--color-foreground)}
@supports (color:color-mix(in lab, red, red)){
.s-testimonials__quote{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)}
.s-testimonials__avatar{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)}
}
@container (min-width:32rem){
.s-testimonials__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:48rem){
.s-testimonials__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* propio */
.s-testimonials__grid{list-style:none;margin:0;padding:0}
.s-testimonials__quote{margin:0}
.s-testimonials__avatar{display:grid;place-items:center;border-radius:50%;font-size:.625rem;font-weight:600;color:var(--background);background:var(--foreground)}
.s-testimonials__who figcaption{display:contents}
```

## Credits

- Tailark mist (MIT) · testimonials/two: https://github.com/tailark/blocks