Saltar al contenido
npm ↗ GitHub ↗

Documentación

15/Contenido

Testimonios

Citas con autor, cargo y avatar. Se combinan con cb-grid para mostrar varias.

En grilla

Pasamos de hojas de cálculo a un sistema que todo el equipo entiende. El cambio se notó en la primera semana.
MRMaría RamírezGerente, Ferretería El Centro
Respuestas rápidas y código entregado con documentación. Justo lo que necesitábamos.
JLJosé LópezCTO, Logística Norte
HTML
<div class="cb-grid cb-grid--2 cb-grid--flush">
  <figure class="cb-testimonial">
    <blockquote class="cb-testimonial__quote">Pasamos de hojas de cálculo a un sistema que todo el equipo entiende. El cambio se notó en la primera semana.</blockquote>
    <figcaption class="cb-testimonial__author"><span class="cb-avatar cb-avatar--accent">MR</span><span><span class="cb-testimonial__name">María Ramírez</span><span class="cb-testimonial__role">Gerente, Ferretería El Centro</span></span></figcaption>
  </figure>
  <figure class="cb-testimonial">
    <blockquote class="cb-testimonial__quote">Respuestas rápidas y código entregado con documentación. Justo lo que necesitábamos.</blockquote>
    <figcaption class="cb-testimonial__author"><span class="cb-avatar">JL</span><span><span class="cb-testimonial__name">José López</span><span class="cb-testimonial__role">CTO, Logística Norte</span></span></figcaption>
  </figure>
</div>

Grande

El mejor proveedor con el que hemos trabajado. Entienden el negocio antes de escribir una línea de código.
APAna PérezDirectora de operaciones
HTML
<figure class="cb-testimonial cb-testimonial--large max-w-[760px] p-0">
  <blockquote class="cb-testimonial__quote">El mejor proveedor con el que hemos trabajado. Entienden el negocio antes de escribir una línea de código.</blockquote>
  <figcaption class="cb-testimonial__author"><span class="cb-avatar cb-avatar--lg">AP</span><span><span class="cb-testimonial__name">Ana Pérez</span><span class="cb-testimonial__role">Directora de operaciones</span></span></figcaption>
</figure>

Clases y modificadores

ClaseDescripción
.cb-testimonialBloque figure. --large aumenta la cita.
.cb-testimonial__quoteCita con comillas de acento.
.cb-testimonial__authorFila del autor al pie.
.cb-testimonial__name, .cb-testimonial__roleNombre y cargo.

Accesibilidad

  • figure + blockquote + figcaption relacionan la cita con su autor.