{{ 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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
},
{
"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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
},
{
"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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
},
{
"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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
},
{
"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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
},
{
"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": {
"inputPath": "./site/design-system/components-pages.njk",
"fileSlug": "components-pages",
"filePathStem": "/design-system/components-pages",
"outputFileExtension": "html",
"templateSyntax": "njk",
"date": "2026-03-31T20:22:26.731Z",
"rawInput": "{%- macro c(path, name, params) -%}\n {% include \"components/\" + path + \"/\" + name + \".njk\" ignore missing %}\n{%- endmacro -%}\n{% set fullPath = '/design-system/components/full/' + component.slug %}\n\n<seven-minute-tabs class=\"ds-stretch\">\n <ol role=\"tablist\" class=\"ds-tabs\" aria-label=\"What does this tab chooser do?\">\n <li><a class=\"ds-link\" href=\"#example-tab\" role=\"tab\">Demo</a></li>\n <li><a class=\"ds-link\" href=\"#code-tab\" role=\"tab\">HTML</a></li>\n <li><a class=\"ds-link\" href=\"#context-tab\" role=\"tab\">Context</a></li>\n <li><a class=\"ds-link\" href=\"{{ fullPath | url }}\">Full Screen ↗</a></li>\n </ol>\n\n <div id=\"example-tab\" role=\"tabpanel\" class=\"ds-stretch\">\n <div class=\"ds-frame ds-stretch\">\n <iframe class=\"ds-stretch\" src=\"{{ fullPath | url }}\" title=\"Component Frame\" sandbox=\"allow-same-origin allow-scripts allow-forms allow-modals\" style=\"\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" scrolling=\"yes\"></iframe>\n </div>\n </div>\n\n <div id=\"code-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"html\" %}\n {%- prettify -%}\n {% set params = component.context %}\n {% include \"components/\" + component.path + \"/\" + component.name + \".njk\" ignore missing %}\n {%- endprettify -%}\n {% endhighlight %}\n </div>\n\n <div id=\"context-tab\" role=\"tabpanel\" class=\"ds-code ds-stretch\">\n {% highlight \"js\" %}\n {% brace %} c(\"{{ component.path }}\", \"{{ component.name }}\", {{ component.context | console | safe }}) {% endbrace %}\n {% endhighlight %}\n </div>\n</seven-minute-tabs>\n",
"url": "/design-system/components/_compositions/grid/",
"outputPath": "./dist/design-system/components/_compositions/grid/index.html"
},
"eleventy": {
"version": "3.1.5",
"generator": "Eleventy v3.1.5",
"env": {
"source": "cli",
"runMode": "build",
"config": "/buddy/stevenwoodson-com/eleventy.config.js",
"root": "/buddy/stevenwoodson-com"
},
"directories": {
"input": "./site/",
"data": "./site/_data/",
"includes": "./site/_includes/",
"output": "./dist/"
}
}
}
]
}) }}
