people_header.html

{% extends 'styleguide2/includes/organisms/header/simple_header_with_ui_switch.html' %}

{% block classes %}
  bg-black flex items-center w-full mb-20 pt-28 pb-8

  xl:pt-32 xl:pb-16
{% endblock %}

{% block description %}
   <div
      class="
         hidden gap-10 py-4 font-bold pr-4 grid-cols-1 whitespace-pre-line [&_p]:!text-lg [&_p]:leading-7
         md:grid md:grid-cols-2 md:pr-0
      "
   >
    <p>
      {{ description_column_1 }}
    </p>

    <p>
      {{ description_column_2 }}
    </p>
  </div>
{% endblock %}

{% block switch %}
  {% for people_group in people %}
    <a @click="toggleView('{{ people_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
       :class="{'switch__item--active': isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')}"
    >
      {{ people_group.value.title }}
    </a>
  {% endfor %}
{% endblock %}