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

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

This collapsable conmponent contains a `header` and a `content` container.
The header automatically places an arrow. When the arrow/header is toggled the
content is shown or hidden. The height of the content is taken into account
in order for the collapsable animation to work.

{% endset %}

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

{% endset %} #}

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

- is-open

  Indicates whether your collapse is open or not

{% endset %}

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

- js-collapse

  This class is used to attach the JavaScript functionality onto the component
  in the styleguide. It enables the collapse component to be toggled onto the
  `is-active` class.

{% endset %}