---

HTML Code (Demo)

<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>

---

Configuration

Component Config: Layout/sidebar/sidebar.config.js

{
  "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"
    }
  ]
}