Pattern Library

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

{% block header_margin_class %}{% endblock %}

{% block classes %}
  bg-pirati-yellow flex items-center w-full pt-28 pb-8

  xl:pt-48 xl:pb-24

  {% block extra_classes %}{% endblock %}
{% endblock %}

{% block content %}
  <div
    class="
      flex gap-10 flex-col-reverse
      lg:flex-row lg:gap-4
    "
  >
    <div class="grow w-full text-white flex flex-col !text-black">
      {% block heading %}
        <h1
          class="
            {% block heading_classes %}
              mb-1 head-8xl
              lg:head-7xl
            {% endblock %}
          "
        >
          {{ name }}
        </h1>
      {% endblock %}

      {% block position %}
        <p
          class="
            font-bold text-lg mt-[-0.5rem] mb-6
            lg:mt-[-1rem]
          "
        >
          {{ position }}
        </p>
      {% endblock %}

      {% block description %}
        <div
          class="
            mb-10

            [&_p]:text-lg

            [&_.content-block]:flex
            [&_.content-block]:flex-col
            [&_.content-block]:gap-4
          "
        >
          <div class="content-block">
            <p>
              {{ description_1 }}
            </p>

            <p>
              {{ description_2 }}
            </p>

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

      {% block contact %}
        <div>
          {% include 'patterns/molecules/blocks/inline_contact.html' %}
        </div>
      {% endblock %}
    </div>

    <div
      class="
        flex justify-center items-start grow w-full
      "
    >
      <img
        class="lg:w-3/5"
        src="{{ image_url }}"
      >
    </div>
  </div>
{% endblock %}