Pattern Library

<div
  class="
    {% block wrapper_classes %}
      bg-black text-white
    {% endblock %}
  "
>
  <div class="container--medium __js-root">
    <div
      class="
        flex gap-2 items-start py-16 flex-col

        xl:py-24 xl:flex-row xl:gap-4
      "
    >
      <h2
        class="
          {% block heading_classes %}
            head-14xl head-compact
          {% endblock %}
        "
      >
        {{ title }}
      </h2>

      {% if description %}
        <p class="{% block description_classes %}max-w-[350px] text-xl{% endblock %}">
          {{ description }}
        </p>
      {% endif %}
    </div>

    <ui-horizontal-scrollable
      classes="
        flex gap-8 overflow-x-scroll mt-4 mb-8
        lg:mt-0 lg:grid lg:grid-cols-2
        xl:grid-cols-3
      "
    >
      {% include 'patterns/molecules/boxes/card_box.html' %}
      {% include 'patterns/molecules/boxes/card_box.html' %}
      {% include 'patterns/molecules/boxes/card_box.html' %}
    </ui-horizontal-scrollable>

    <!-- NOTE: This will change once europarl section exists. py-12  -->
    <div
      class="
        {% block button_wrapper_classes %}
          flex justify-center pt-12

          xl:py-24
        {% endblock %}
      "
    >
      {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black" %}
    </div>
  </div>
</div>