Tabs - Component

Code

Source (Nunjucks)

<web-tabs>
  {% for item in data.items %}
  <div class="flow pad-block-size-1" data-label="{{ item }}">
    <h2>{{ item }}</h2>
    <p>Accumsan egestas suscipit quam hendrerit molestie ultrices vehicula bibendum nunc.</p>
  </div>
  {% endfor %}
</web-tabs>

Output

<web-tabs>
  <div class="flow pad-block-size-1" data-label="Sodales curabitur pretium">
    <h2>Sodales curabitur pretium</h2>
    <p>
      Accumsan egestas suscipit quam hendrerit molestie ultrices vehicula
      bibendum nunc.
    </p>
  </div>
  <div class="flow pad-block-size-1" data-label="Ultricies interdum">
    <h2>Ultricies interdum</h2>
    <p>
      Accumsan egestas suscipit quam hendrerit molestie ultrices vehicula
      bibendum nunc.
    </p>
  </div>
  <div class="flow pad-block-size-1" data-label="Senectus aliquet">
    <h2>Senectus aliquet</h2>
    <p>
      Accumsan egestas suscipit quam hendrerit molestie ultrices vehicula
      bibendum nunc.
    </p>
  </div>
</web-tabs>

Information

To change the active color, set a Custom Property value for --tabs-active-color and it will override the default, which is the primary color.

It’s also recommended that panels passed into <web-tabs> have padding— using pad-inline-size-1, for example—to make them render nicely where JavaScript isn’t available and also, prevents us having to add unnecessary spacing in the _web-tab.scss component styles.

Key links

Sass File