{
  "name": "testimonial-grid",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-marketing-blocks/v050-marketing-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <col-ui gap=\"4\">\n      <header align=\"center\">\n        <h2>What teams are saying</h2>\n      </header>\n      <grid-ui columns=\"1 3@md\" gap=\"4\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"3\">\n              <text-ui>\"Cut our GenUI shipping time by 4×. Free-form composer just works.\"</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"DS\" size=\"md\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong size=\"sm\">Diana Singh</text-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">Eng Lead, Design Tokens Studio</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"3\">\n              <text-ui>\"The chunk vocabulary made our PM-to-prototype loop instant.\"</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"MR\" size=\"md\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong size=\"sm\">Marco Rossi</text-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">Head of Product, Anvil</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"3\">\n              <text-ui>\"We replaced 6 hand-built primitives with one annotated chunk.\"</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"JC\" size=\"md\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong size=\"sm\">June Chen</text-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">Staff Engineer, Vellum</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </grid-ui>\n    </col-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-marketing-blocks/v050-marketing-blocks.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "3-column testimonial grid with avatar, name, role, and quote per tile.",
    "keywords": [
      "testimonial",
      "grid",
      "quotes",
      "social-proof",
      "reviews",
      "avatars",
      "customer-stories",
      "marketing"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "title",
      "textContent": "What teams are saying"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "\"Cut our GenUI shipping time by 4×. Free-form composer just works.\""
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "md",
      "text": "DS"
    },
    {
      "id": "text-3",
      "component": "Text",
      "size": "sm",
      "strong": true,
      "textContent": "Diana Singh"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Eng Lead, Design Tokens Studio"
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "0",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar",
        "column-3"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-2",
        "row"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "\"The chunk vocabulary made our PM-to-prototype loop instant.\""
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "size": "md",
      "text": "MR"
    },
    {
      "id": "text-6",
      "component": "Text",
      "size": "sm",
      "strong": true,
      "textContent": "Marco Rossi"
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Head of Product, Anvil"
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "0",
      "children": [
        "text-6",
        "text-7"
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-2",
        "column-5"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-5",
        "row-2"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "textContent": "\"We replaced 6 hand-built primitives with one annotated chunk.\""
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "size": "md",
      "text": "JC"
    },
    {
      "id": "text-9",
      "component": "Text",
      "size": "sm",
      "strong": true,
      "textContent": "June Chen"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Staff Engineer, Vellum"
    },
    {
      "id": "column-7",
      "component": "Column",
      "gap": "0",
      "children": [
        "text-9",
        "text-10"
      ]
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-3",
        "column-7"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "gap": "3",
      "children": [
        "text-8",
        "row-3"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-6"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 3@md",
      "gap": "4",
      "children": [
        "card",
        "card-2",
        "card-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "header",
        "grid"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "column"
      ]
    }
  ]
}