Front W - Pattern Library

Table of Content 

<nav class="toc" id="toc" aria-labelledby="sections_heading">
    <h2 class="h5 toc__heading" id="sections_heading">Inhaltsverzeichnis</h2>
    <ol class="toc__list">
        <li class="toc__item ">
            <a href="#">Item 1</a>
        </li>
        <li class="toc__item ">
            <a href="#">Item 2</a>
        </li>
        <li class="toc__item ">
            <a href="#">Item 3</a>
        </li>
        <li class="toc__item ">
            <a href="#">Item 4</a>
        </li>
    </ol>
</nav>
 
<nav class="toc" id="toc" aria-labelledby="sections_heading">
  <h2 class="h5 toc__heading" id="sections_heading">{{ heading }}</h2>
  <ol class="toc__list">
    {% for item in items %}
      <li class="toc__item {{ item.active ? 'active' : ''}}">
        <a href="{{ item.url }}">{{ item.label }}</a>
      </li>
    {% endfor %}
  </ol>
</nav>
 
{
  "heading": "Inhaltsverzeichnis",
  "items": [
    {
      "label": "Item 1",
      "url": "#",
      "active": false
    },
    {
      "label": "Item 2",
      "url": "#",
      "active": false
    },
    {
      "label": "Item 3",
      "url": "#",
      "active": false
    },
    {
      "label": "Item 4",
      "url": "#",
      "active": false
    }
  ]
}