Pattern Library

{% extends 'patterns/organisms/header/simple_header.html' %}

{% block header_margin_class %}{% endblock %}

{% block after_description %}
  <div
    class="
      container--medium flex justify-start !pl-[unset] !pr-[unset] !ml-[unset] !mr-[unset]
      xl:mb-12 mb-4
    "
  >
    <ui-horizontal-scrollable
      classes="
        switch overflow-x-scroll flex gap-x-2 gap-y-1 w-[calc(100vw_-_3rem)]

        lg:overflow-x-hidden lg:flex-wrap lg:w-[unset]
      "
      arrow-position="bottom"
    >
      {% block switch %}
        {% for switch in ui_switch_iterable %}
          <a
            @click="toggleView('view{{ forloop.counter }}')"
            class="switch__item"
            :class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
          >{{ switch.name }}</a>
        {% endfor %}
      {% endblock %}
    </ui-horizontal-scrollable>
  </div>
{% endblock %}