{# ========================================================================= #}
{# :: Inheritance #}
{# ========================================================================= #}
{% extends "brandplatform/base/extends/component/page.njk" %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

The tabs component is used to show a lot of content hidden in subject
specific tabs. It always consists of a `tab-list` and a `content` section.
Switching the tabs doesn't trigger any functionality of hidding or showing
content. Because it also has to be compliant to the mobile structure, a
default tab functionality wasn't possible. The tabs on themselves own have
an active class `is-active`.

{% endset %}

{# ========================================================================= #}
{# :: Modifiers #}
{# ========================================================================= #}
{% set modifiers %}

- o-tabs--no-spacing

  This class adds no spacing around the content.

{% endset %}

{# ========================================================================= #}
{# :: States #}
{# ========================================================================= #}
{% set states %}

- is-active

  This class is placed on the child element o-tabs__item and is used to show
  which tab is open/active

- is-loading

  Placed on the root of the component to indicate that the tabs visiblity
  calculations are being made. This will hide the tab list until the JavaScript
  was executed.

{% endset %}

{# ========================================================================= #}
{# :: JavaScript #}
{# ========================================================================= #}
{% set javascript %}

- js-tabs

  Indicate that this component uses JavaScript, remove this class to disable
  the JavaScript. This makes sure that the tabs out of the list gets placed in
  the more menu.

{% endset %}