Copy environment

Sidebar

<aside class="sidebar  ">
    <h4 class="sidebar__title">clients</h4>
    <ul class="sidebar__list">
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Tavex</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Telia</a>
        </li>
        <li class="sidebar__list-item is-current">
            <a href="#" class="sidebar__link ">Diapol Granite</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Maikrahv</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Palmako</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">1Office Group</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Tutor.id</a>
        </li>
    </ul>
</aside>
{
  "language": "en-US",
  "data": {
    "title": "clients",
    "list": [
      {
        "link": "#",
        "text": "Tavex"
      },
      {
        "link": "#",
        "text": "Telia"
      },
      {
        "link": "#",
        "text": "Diapol Granite",
        "current": true
      },
      {
        "link": "#",
        "text": "Maikrahv"
      },
      {
        "link": "#",
        "text": "Palmako"
      },
      {
        "link": "#",
        "text": "1Office Group"
      },
      {
        "link": "#",
        "text": "Tutor.id"
      }
    ]
  }
}

On Dark

<aside class="sidebar sidebar--on-dark ">
    <h4 class="sidebar__title">clients</h4>
    <ul class="sidebar__list">
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Tavex</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Telia</a>
        </li>
        <li class="sidebar__list-item is-current">
            <a href="#" class="sidebar__link ">Diapol Granite</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Maikrahv</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Palmako</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">1Office Group</a>
        </li>
        <li class="sidebar__list-item">
            <a href="#" class="sidebar__link ">Tutor.id</a>
        </li>
    </ul>
</aside>
{
  "language": "en-US",
  "data": {
    "title": "clients",
    "list": [
      {
        "link": "#",
        "text": "Tavex"
      },
      {
        "link": "#",
        "text": "Telia"
      },
      {
        "link": "#",
        "text": "Diapol Granite",
        "current": true
      },
      {
        "link": "#",
        "text": "Maikrahv"
      },
      {
        "link": "#",
        "text": "Palmako"
      },
      {
        "link": "#",
        "text": "1Office Group"
      },
      {
        "link": "#",
        "text": "Tutor.id"
      }
    ]
  },
  "modifier": "sidebar--on-dark"
}
  • Handle: @sidebar--on-dark
  • Tags:
  • Variants (2): default, on-dark
  • Preview:
  • Filesystem Path: src/patterns/components/sidebar/sidebar.twig