{
  "name": "card-grid-images",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/catalog/ui-patterns/app/card-grid-images/card-grid-images.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "columns": "1 2@sm 3@md",
    "gap": "4"
  },
  "html": "<grid-ui columns=\"1 2@sm 3@md\" gap=\"4\">\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"accent\" hide-values\n          data='[{\"t\":1,\"v\":60},{\"t\":2,\"v\":80},{\"t\":3,\"v\":45},{\"t\":4,\"v\":90},{\"t\":5,\"v\":70},{\"t\":6,\"v\":85},{\"t\":7,\"v\":55}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">Mountain at Dawn</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">Golden light breaking over alpine peaks in early morning.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"info\" hide-values\n          data='[{\"t\":1,\"v\":40},{\"t\":2,\"v\":65},{\"t\":3,\"v\":80},{\"t\":4,\"v\":55},{\"t\":5,\"v\":90},{\"t\":6,\"v\":75},{\"t\":7,\"v\":60}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">Coastal Town</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">Vibrant harbour-side architecture reflected in still waters.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"success\" hide-values\n          data='[{\"t\":1,\"v\":70},{\"t\":2,\"v\":50},{\"t\":3,\"v\":85},{\"t\":4,\"v\":65},{\"t\":5,\"v\":45},{\"t\":6,\"v\":80},{\"t\":7,\"v\":90}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">Forest Path</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">A quiet trail winding through fiery autumn foliage.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"warning\" hide-values\n          data='[{\"t\":1,\"v\":85},{\"t\":2,\"v\":60},{\"t\":3,\"v\":75},{\"t\":4,\"v\":40},{\"t\":5,\"v\":95},{\"t\":6,\"v\":65},{\"t\":7,\"v\":50}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">Modern Architecture</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">Bold lines and repeating geometry in contemporary design.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"muted\" hide-values\n          data='[{\"t\":1,\"v\":30},{\"t\":2,\"v\":55},{\"t\":3,\"v\":40},{\"t\":4,\"v\":70},{\"t\":5,\"v\":50},{\"t\":6,\"v\":35},{\"t\":7,\"v\":65}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">City at Night</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">A bird's-eye tapestry of light and shadow over the urban grid.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n\n    <card-ui>\n      <section bleed>\n        <chart-ui type=\"sparkline\" x=\"t\" y=\"v\" color=\"danger\" hide-values\n          data='[{\"t\":1,\"v\":75},{\"t\":2,\"v\":90},{\"t\":3,\"v\":60},{\"t\":4,\"v\":80},{\"t\":5,\"v\":45},{\"t\":6,\"v\":70},{\"t\":7,\"v\":85}]'\n          style=\"height:160px\"></chart-ui>\n      </section>\n      <section>\n        <col-ui gap=\"1\">\n          <text-ui weight=\"semibold\">Desert Dunes</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\">Sweeping curves of sand sculpted by wind at golden hour.</text-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n</grid-ui>",
  "source": "catalog/ui-patterns/app/card-grid-images/card-grid-images.contents.html",
  "metadata": {
    "domain": "content",
    "description": "Image gallery grid with lightbox overlay — responsive 3-column grid of image cards with cover photo, title, and description.",
    "keywords": [
      "image",
      "gallery",
      "grid",
      "lightbox",
      "overlay",
      "card-grid",
      "image-ui",
      "media",
      "photo",
      "gallery-grid",
      "thumbnail",
      "responsive",
      "3-column",
      "media-gallery"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "chart",
      "component": "Chart",
      "type": "sparkline",
      "color": "accent",
      "data": "[{\"t\":1,\"v\":60},{\"t\":2,\"v\":80},{\"t\":3,\"v\":45},{\"t\":4,\"v\":90},{\"t\":5,\"v\":70},{\"t\":6,\"v\":85},{\"t\":7,\"v\":55}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart"
      ]
    },
    {
      "id": "text",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Mountain at Dawn"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Golden light breaking over alpine peaks in early morning."
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "1",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "section",
        "section-2"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "chart-2",
      "component": "Chart",
      "type": "sparkline",
      "color": "info",
      "data": "[{\"t\":1,\"v\":40},{\"t\":2,\"v\":65},{\"t\":3,\"v\":80},{\"t\":4,\"v\":55},{\"t\":5,\"v\":90},{\"t\":6,\"v\":75},{\"t\":7,\"v\":60}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section-4",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Coastal Town"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Vibrant harbour-side architecture reflected in still waters."
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "section-5",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "section-4",
        "section-5"
      ]
    },
    {
      "id": "section-6",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-6"
      ]
    },
    {
      "id": "chart-3",
      "component": "Chart",
      "type": "sparkline",
      "color": "success",
      "data": "[{\"t\":1,\"v\":70},{\"t\":2,\"v\":50},{\"t\":3,\"v\":85},{\"t\":4,\"v\":65},{\"t\":5,\"v\":45},{\"t\":6,\"v\":80},{\"t\":7,\"v\":90}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section-7",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart-3"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Forest Path"
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "A quiet trail winding through fiery autumn foliage."
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "section-8",
      "component": "Section",
      "children": [
        "column-5"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "children": [
        "section-7",
        "section-8"
      ]
    },
    {
      "id": "section-9",
      "component": "Section",
      "children": [
        "column-6"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "section-9"
      ]
    },
    {
      "id": "chart-4",
      "component": "Chart",
      "type": "sparkline",
      "color": "warning",
      "data": "[{\"t\":1,\"v\":85},{\"t\":2,\"v\":60},{\"t\":3,\"v\":75},{\"t\":4,\"v\":40},{\"t\":5,\"v\":95},{\"t\":6,\"v\":65},{\"t\":7,\"v\":50}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section-10",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart-4"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Modern Architecture"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Bold lines and repeating geometry in contemporary design."
    },
    {
      "id": "column-7",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-7",
        "text-8"
      ]
    },
    {
      "id": "section-11",
      "component": "Section",
      "children": [
        "column-7"
      ]
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "section-10",
        "section-11"
      ]
    },
    {
      "id": "section-12",
      "component": "Section",
      "children": [
        "column-8"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "children": [
        "section-12"
      ]
    },
    {
      "id": "chart-5",
      "component": "Chart",
      "type": "sparkline",
      "color": "muted",
      "data": "[{\"t\":1,\"v\":30},{\"t\":2,\"v\":55},{\"t\":3,\"v\":40},{\"t\":4,\"v\":70},{\"t\":5,\"v\":50},{\"t\":6,\"v\":35},{\"t\":7,\"v\":65}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section-13",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart-5"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "weight": "semibold",
      "textContent": "City at Night"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "A bird's-eye tapestry of light and shadow over the urban grid."
    },
    {
      "id": "column-9",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-9",
        "text-10"
      ]
    },
    {
      "id": "section-14",
      "component": "Section",
      "children": [
        "column-9"
      ]
    },
    {
      "id": "column-10",
      "component": "Column",
      "children": [
        "section-13",
        "section-14"
      ]
    },
    {
      "id": "section-15",
      "component": "Section",
      "children": [
        "column-10"
      ]
    },
    {
      "id": "card-5",
      "component": "Card",
      "children": [
        "section-15"
      ]
    },
    {
      "id": "chart-6",
      "component": "Chart",
      "type": "sparkline",
      "color": "danger",
      "data": "[{\"t\":1,\"v\":75},{\"t\":2,\"v\":90},{\"t\":3,\"v\":60},{\"t\":4,\"v\":80},{\"t\":5,\"v\":45},{\"t\":6,\"v\":70},{\"t\":7,\"v\":85}]",
      "x": "t",
      "y": "v"
    },
    {
      "id": "section-16",
      "component": "Section",
      "bleed": true,
      "children": [
        "chart-6"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Desert Dunes"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Sweeping curves of sand sculpted by wind at golden hour."
    },
    {
      "id": "column-11",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-11",
        "text-12"
      ]
    },
    {
      "id": "section-17",
      "component": "Section",
      "children": [
        "column-11"
      ]
    },
    {
      "id": "column-12",
      "component": "Column",
      "children": [
        "section-16",
        "section-17"
      ]
    },
    {
      "id": "section-18",
      "component": "Section",
      "children": [
        "column-12"
      ]
    },
    {
      "id": "card-6",
      "component": "Card",
      "children": [
        "section-18"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "1 2@sm 3@md",
      "gap": "4",
      "children": [
        "card",
        "card-2",
        "card-3",
        "card-4",
        "card-5",
        "card-6"
      ]
    }
  ]
}