1. Demo
  2. HTML
  3. Context
  4. Full Screen ↗
<div class="grid">
  <div class="card z-depth">
    <h3>Photo First</h3>
    <img src="https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
  </div>
  <div class="card z-depth">
    <h3>Headline First</h3>
    <img src="https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
  </div>
  <div class="card z-depth">
    <h3>Photo Last</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
    <img src="https://images.unsplash.com/photo-1664228581057-d7df1ecf7f14?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
  </div>
  <div class="card z-depth">
    <h3>Photo First</h3>
    <img src="https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
  </div>
  <div class="card z-depth">
    <h3>Headline First</h3>
    <img src="https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
  </div>
  <div class="card z-depth">
    <h3>Photo Last</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
    <img src="https://images.unsplash.com/photo-1664228581057-d7df1ecf7f14?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
  </div>
</div>
{{ c("_compositions/grid", "grid", {
  "headline": "Card Grid",
  "cards": [
    {
      "headline": "Photo First",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    },
    {
      "headline": "Headline First",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "option": "headline-first",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    },
    {
      "headline": "Photo Last",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1664228581057-d7df1ecf7f14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "option": "photo-last",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    },
    {
      "headline": "Photo First",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    },
    {
      "headline": "Headline First",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "option": "headline-first",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    },
    {
      "headline": "Photo Last",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
      "image": "https://images.unsplash.com/photo-1664228581057-d7df1ecf7f14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "option": "photo-last",
      "page": {
        "url": "/design-system/components/_compositions/grid/",
        "outputPath": "dist/design-system/components/_compositions/grid/index.html",
        "date": "2024-03-31T12:59:11.659Z",
        "inputPath": "./site/design-system/components-pages.njk",
        "fileSlug": "components-pages",
        "filePathStem": "/design-system/components-pages",
        "outputFileExtension": "html",
        "templateSyntax": "njk"
      },
      "eleventy": {
        "version": "2.0.1",
        "generator": "Eleventy v2.0.1",
        "env": {
          "source": "cli",
          "runMode": "build",
          "config": "/buddy/stevenwoodson-com/.eleventy.js",
          "root": "/buddy/stevenwoodson-com",
          "isServerless": false
        }
      }
    }
  ]
}) }}