<sidebar-l>
  <nav>
    <ul>
      <li>Sidebar Nav Item</li>
      <li>Sidebar Nav Item</li>
      <li>Sidebar Nav Item</li>
      <li>Sidebar Nav Item</li>
    </ul>
  </nav>
  <main class="flow">
    <h1>Primary Headline</h1>
    <p>Body copy</p>
  </main>
</sidebar-l>

{{ c("_compositions/sidebar", "sidebar", {
  "headline": "Sidebar",
  "cards": [
    {
      "headline": "Photo First",
      "image": "https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400"
    },
    {
      "headline": "Headline First",
      "image": "https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
      "option": "headline-first"
    },
    {
      "headline": "Photo Last",
      "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/sidebar/",
    "outputPath": "./dist/design-system/components/_compositions/sidebar/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/"
    }
  }
}) }}