Tabs

  • Tab 1
    Tab 2

    Tab 1


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.

    Tab 2


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.

  •         {% set tabs = {
  navigation: [
    {
      target: "tab-1",
      label: "Tab 1",
      active: true
    },
    {
      target: "tab-2",
      label: "Tab 2"
    }
  ],
  tabs: [
    {
      id: "tab-1",
      content: "<h2>Tab 1</h2><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.</p>",
      active: true
    },
    {
    id: "tab-2",
      content: "<h2>Tab 2</h2><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.</p>",
    }
  ]
} %}

{% include "@Components/tabs/tabs.twig" with {props: tabs} %}

      
  •           
<div class="g-tabs --js-tabs">
  <div class="g-tabs__navigation d-flex gap-2 mb-2">
                <div class="g-tabs__nav-item p-2 --js-tabs__tab-item --active" data-tab-target="tab-1">Tab 1</div>
                <div class="g-tabs__nav-item p-2 --js-tabs__tab-item" data-tab-target="tab-2">Tab 2</div>
      </div>

  <div class="g-tabs__content">
                <div class="g-tabs__tab-item --js-tabs__panel --active" data-panel-id="tab-1"><h2>Tab 1</h2><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.</p></div>
                <div class="g-tabs__tab-item --js-tabs__panel" data-panel-id="tab-2"><h2>Tab 2</h2><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti aliquid nisi aspernatur tenetur amet nobis aut repellendus excepturi vitae aperiam in doloribus, eum reprehenderit animi molestiae quam ipsa! Numquam.</p></div>
      </div>
</div>