Front W - Pattern Library

Tabs 

<div class="tabs" data-controller="tabs">
    <ul class="tabs__list" data-tabs-target="tablist">
        <li>
            <a href="#tab-1" class="tabs__link" data-tabs-target="tab">Tab 1</a>
        </li>
        <li>
            <a href="#tab-2" class="tabs__link" data-tabs-target="tab">Tab 2 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</a>
        </li>
        <li>
            <a href="#tab-3" class="tabs__link" data-tabs-target="tab">Tab 3</a>
        </li>
        <li>
            <a href="#tab-4" class="tabs__link" data-tabs-target="tab">Tab 4</a>
        </li>
        <li>
            <a href="#tab-5" class="tabs__link" data-tabs-target="tab">Tab 5 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</a>
        </li>
    </ul>
    <section class="tabs__panel" data-tabs-target="panel" id="tab-1">

        <h4>Tab content 1</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>

    </section>
    <section class="tabs__panel" data-tabs-target="panel" id="tab-2">

        <h4>Tab content 2</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>

    </section>
    <section class="tabs__panel" data-tabs-target="panel" id="tab-3">

        <h4>Tab content 3</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>

    </section>
    <section class="tabs__panel" data-tabs-target="panel" id="tab-4">

        <h4>Tab content 4</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>

    </section>
    <section class="tabs__panel" data-tabs-target="panel" id="tab-5">

        <h4>Tab content 5</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>

    </section>
</div>
 
<div class="tabs" data-controller="tabs">
  <ul class="tabs__list" data-tabs-target="tablist">
    {% for tab in tabs %}
    <li>
      <a href="#{{tab.id}}" class="tabs__link" data-tabs-target="tab">{{tab.label}}</a>
    </li>
    {% endfor %}
  </ul>
  {% for tab in tabs %}
  <section class="tabs__panel" data-tabs-target="panel" id="{{tab.id}}">
    {{ tab.content|raw }}
  </section>
  {% endfor %}
</div>
 
{
  "tabs": [
    {
      "label": "Tab 1",
      "id": "tab-1",
      "content": "\n          <h4>Tab content 1</h4>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n        "
    },
    {
      "label": "Tab 2 Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
      "id": "tab-2",
      "content": "\n          <h4>Tab content 2</h4>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n        "
    },
    {
      "label": "Tab 3",
      "id": "tab-3",
      "selected": true,
      "content": "\n          <h4>Tab content 3</h4>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n        "
    },
    {
      "label": "Tab 4",
      "id": "tab-4",
      "selected": true,
      "content": "\n          <h4>Tab content 4</h4>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n        "
    },
    {
      "label": "Tab 5 Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
      "id": "tab-5",
      "selected": true,
      "content": "\n          <h4>Tab content 5</h4>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sed aspernatur ducimus, expedita hic animi quae aperiam nulla ullam magni, quibusdam commodi delectus doloremque sapiente nemo placeat officiis temporibus deleniti.</p>\n        "
    }
  ]
}