{
  "name": "masonry-gallery",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <col-ui gap=\"4\">\n      <header>\n        <h3>Gallery</h3>\n        <p>128 images</p>\n      </header>\n      <grid-ui columns=\"2 4@md\" gap=\"2\">\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ tall image ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ wide image ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ square ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ tall image ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ wide image ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ square ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ tall image ]</text-ui></section></card-ui>\n        <card-ui raw><section><text-ui size=\"sm\" color=\"subtle\">[ wide image ]</text-ui></section></card-ui>\n      </grid-ui>\n    </col-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Masonry image gallery — variable-height tiles in a column-flow grid with hover overlays.",
    "keywords": [
      "masonry",
      "gallery",
      "images",
      "photos",
      "grid",
      "variable-height",
      "pinterest",
      "tiles",
      "overlays",
      "lightbox"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Gallery"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "128 images"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ tall image ]"
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "raw": true,
      "children": [
        "section"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ wide image ]"
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "raw": true,
      "children": [
        "section-2"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ square ]"
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "raw": true,
      "children": [
        "section-3"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ tall image ]"
    },
    {
      "id": "section-4",
      "component": "Section",
      "children": [
        "column-5"
      ]
    },
    {
      "id": "column-5",
      "component": "Column",
      "children": [
        "text-6"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "raw": true,
      "children": [
        "section-4"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ wide image ]"
    },
    {
      "id": "section-5",
      "component": "Section",
      "children": [
        "column-6"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "children": [
        "text-7"
      ]
    },
    {
      "id": "card-5",
      "component": "Card",
      "raw": true,
      "children": [
        "section-5"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ square ]"
    },
    {
      "id": "section-6",
      "component": "Section",
      "children": [
        "column-7"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "children": [
        "text-8"
      ]
    },
    {
      "id": "card-6",
      "component": "Card",
      "raw": true,
      "children": [
        "section-6"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ tall image ]"
    },
    {
      "id": "section-7",
      "component": "Section",
      "children": [
        "column-8"
      ]
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "text-9"
      ]
    },
    {
      "id": "card-7",
      "component": "Card",
      "raw": true,
      "children": [
        "section-7"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "[ wide image ]"
    },
    {
      "id": "section-8",
      "component": "Section",
      "children": [
        "column-9"
      ]
    },
    {
      "id": "column-9",
      "component": "Column",
      "children": [
        "text-10"
      ]
    },
    {
      "id": "card-8",
      "component": "Card",
      "raw": true,
      "children": [
        "section-8"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "2 4@md",
      "gap": "2",
      "children": [
        "card",
        "card-2",
        "card-3",
        "card-4",
        "card-5",
        "card-6",
        "card-7",
        "card-8"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "header",
        "grid"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "column"
      ]
    }
  ]
}