{
  "name": "testimonials",
  "title": {
    "es": "Testimonios",
    "en": "Testimonials"
  },
  "summary": {
    "es": "Tres citas con iniciales, nombre y cargo.",
    "en": "Three quotes with initials, name and role."
  },
  "category": "sections",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-10-08",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/testimonials/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/testimonials/testimonials.html",
      "content": "<section class=\"s-testimonials\" aria-labelledby=\"testimonials-title\">\n  <div class=\"s-testimonials__inner\">\n    <div class=\"s-testimonials__head\">\n      <h2 class=\"s-testimonials__title\" id=\"testimonials-title\" data-parte=\"titulo\">Lo que dicen quienes lo usan</h2>\n      <p class=\"s-testimonials__lead\" data-parte=\"frase\">Testimonios de ejemplo: reemplázalos por los de tus clientes.</p>\n    </div>\n    <ul class=\"s-testimonials__grid\">\n      <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>\n      <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>\n      <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>\n    </ul>\n  </div>\n</section>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/testimonials/testimonials.css",
      "content": "/* testimonials · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde testimonials.tw.json. No editar a mano. Necesita tokens.css. */\n.s-testimonials__inner{container-type:inline-size;margin-inline:auto}\n.s-testimonials__lead{margin-block:calc(var(--spacing)*4)}\n.s-testimonials__who{margin-top:calc(var(--spacing)*4)}\n.s-testimonials__head{margin-bottom:calc(var(--spacing)*12)}\n.s-testimonials__who{display:flex}\n.s-testimonials__grid{display:grid}\n.s-testimonials__dot{width:var(--spacing);height:var(--spacing)}\n.s-testimonials__avatar{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}\n.s-testimonials__inner{width:100%;max-width:var(--container-5xl)}\n.s-testimonials__who{align-items:center;gap:calc(var(--spacing)*2)}\n.s-testimonials__grid{gap:calc(var(--spacing)*6)}\n.s-testimonials__quote{border-radius:var(--radius-2xl)}\n.s-testimonials__dot{border-radius:3.40282e38px}\n.s-testimonials__quote{border-bottom-left-radius:.25rem;border-style:var(--tw-border-style);border-width:1px}\n.s-testimonials__avatar{border-style:var(--tw-border-style);border-width:1px}\n.s-testimonials__quote{border-color:#0000}\n.s-testimonials__avatar{border-color:#0000}\n.s-testimonials__quote{background-color:var(--color-background)}\n.s-testimonials__dot{background-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-testimonials__dot{background-color:color-mix(in oklab,var(--color-foreground)25%,transparent)}\n}\n.s-testimonials{background-color:var(--color-muted)}\n.s-testimonials__quote{padding-inline:calc(var(--spacing)*4)}\n.s-testimonials__inner{padding-inline:calc(var(--spacing)*6)}\n.s-testimonials__quote{padding-block:calc(var(--spacing)*3)}\n.s-testimonials{padding-block:calc(var(--spacing)*24)}\n.s-testimonials__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-testimonials__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-testimonials__name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-testimonials__role{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-testimonials__name{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.s-testimonials__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-testimonials__lead{text-wrap:balance}\n.s-testimonials__title{color:var(--color-foreground)}\n.s-testimonials__text{color:var(--color-foreground)}\n.s-testimonials__name{color:var(--color-foreground)}\n.s-testimonials__lead{color:var(--color-muted-foreground)}\n.s-testimonials__role{color:var(--color-muted-foreground)}\n.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)}\n.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)}\n.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)}\n.s-testimonials__quote{--tw-ring-color:var(--color-foreground)}\n.s-testimonials__avatar{--tw-ring-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-testimonials__quote{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)}\n.s-testimonials__avatar{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)}\n}\n@container (min-width:32rem){\n.s-testimonials__grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n}\n@container (min-width:48rem){\n.s-testimonials__grid{grid-template-columns:repeat(3,minmax(0,1fr))}\n}\n/* propio */\n.s-testimonials__grid{list-style:none;margin:0;padding:0}\n.s-testimonials__quote{margin:0}\n.s-testimonials__avatar{display:grid;place-items:center;border-radius:50%;font-size:.625rem;font-weight:600;color:var(--background);background:var(--foreground)}\n.s-testimonials__who figcaption{display:contents}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/testimonials.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "media",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Para mostrar opiniones reales de clientes."
    ],
    "en": [
      "To show real customer opinions."
    ]
  },
  "avoid": {
    "es": [
      "Con citas inventadas: los ejemplos son para reemplazar."
    ],
    "en": [
      "With made-up quotes: the examples are placeholders."
    ]
  },
  "a11y": {
    "roles": [
      "figure",
      "blockquote"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Cada cita es un figure con blockquote y figcaption."
      ],
      "en": [
        "Each quote is a figure with blockquote and figcaption."
      ]
    },
    "test": {
      "es": [
        "El lector anuncia la cita y luego quién la dijo."
      ],
      "en": [
        "The screen reader announces the quote and then who said it."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · testimonials/two",
      "url": "https://github.com/tailark/blocks"
    }
  ],
  "changes": [
    {
      "date": "2026-09-30",
      "es": "Diseño de Tailark mist en HTML y CSS sin dependencias",
      "en": "Tailark mist design in dependency-free HTML and CSS"
    },
    {
      "date": "2026-10-08",
      "es": "Partes editables declaradas (data-parte) para el Banco de Infinite Canvas.",
      "en": "Editable parts declared (data-parte) for the Infinite Canvas workbench."
    }
  ],
  "partes": [
    {
      "id": "titulo",
      "tipo": "texto",
      "nombre": {
        "es": "Título",
        "en": "Headline"
      }
    },
    {
      "id": "frase",
      "tipo": "texto",
      "nombre": {
        "es": "Frase",
        "en": "Subtitle"
      },
      "ocultable": true
    },
    {
      "id": "t1-texto",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 1 · texto",
        "en": "Testimonial 1 · quote"
      }
    },
    {
      "id": "t1-avatar",
      "tipo": "imagen",
      "nombre": {
        "es": "Testimonio 1 · foto",
        "en": "Testimonial 1 · photo"
      }
    },
    {
      "id": "t1-nombre",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 1 · nombre",
        "en": "Testimonial 1 · name"
      }
    },
    {
      "id": "t1-rol",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 1 · rol",
        "en": "Testimonial 1 · role"
      },
      "ocultable": true
    },
    {
      "id": "t2-texto",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 2 · texto",
        "en": "Testimonial 2 · quote"
      }
    },
    {
      "id": "t2-avatar",
      "tipo": "imagen",
      "nombre": {
        "es": "Testimonio 2 · foto",
        "en": "Testimonial 2 · photo"
      }
    },
    {
      "id": "t2-nombre",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 2 · nombre",
        "en": "Testimonial 2 · name"
      }
    },
    {
      "id": "t2-rol",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 2 · rol",
        "en": "Testimonial 2 · role"
      },
      "ocultable": true
    },
    {
      "id": "t3-texto",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 3 · texto",
        "en": "Testimonial 3 · quote"
      }
    },
    {
      "id": "t3-avatar",
      "tipo": "imagen",
      "nombre": {
        "es": "Testimonio 3 · foto",
        "en": "Testimonial 3 · photo"
      }
    },
    {
      "id": "t3-nombre",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 3 · nombre",
        "en": "Testimonial 3 · name"
      }
    },
    {
      "id": "t3-rol",
      "tipo": "texto",
      "nombre": {
        "es": "Testimonio 3 · rol",
        "en": "Testimonial 3 · role"
      },
      "ocultable": true
    }
  ],
  "pieza": "https://componentes-lovat.vercel.app/r/testimonials.html"
}