1. Demo
  2. HTML
  3. Context
  4. Full Screen ↗
<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": {
    "url": "/design-system/components/_compositions/sidebar/",
    "outputPath": "dist/design-system/components/_compositions/sidebar/index.html",
    "date": "2024-01-01T16:11:04.118Z",
    "inputPath": "./src/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/dannywoodson-org/.eleventy.js",
      "root": "/buddy/dannywoodson-org",
      "isServerless": false
    }
  }
}) }}