Pattern Library

{% block before_header_tag %}{% endblock %}

<header
  class="
    flex flex-col z-100 relative

    {% block header_margin_class %}
      mb-20
    {% endblock %}
  "
>
  <div
    class="
      {% block classes %}
        bg-black flex items-center w-full pt-28 pb-8

        xl:pt-48 xl:pb-24

        {% block extra_classes %}{% endblock %}
      {% endblock %}
    "
  >
    <div class="flex justify-start w-full">
      <div class="container--wide w-full">
        {% block content %}
          <div class="text-white flex flex-col">
            {% block before_heading %}{% endblock %}

            {% block heading %}
              <h1
                class="
                  {% block heading_classes %}
                    mb-1

                    {% if is_short %}head-short{% endif %}

                    {% if description and not override_title_size %}
                      head-10xl
                    {% else %}
                      head-14xl
                    {% endif %}
                  {% endblock %}
                "
              >
                {{ title|safe }}
              </h1>
            {% endblock %}

            {% block after_heading %}{% endblock %}

            {% block description %}
              {% if description %}
                <p
                  class="
                    text-lg leading-7 pr-4 whitespace-pre-line

                    xl:pr-0

                    lg:max-w-screen-lg

                    {% block description_classes %}{% endblock %}
                  "
                >{{ description }}</p>
              {% endif %}
            {% endblock %}

            {% block after_description %}{% endblock %}
          </div>
        {% endblock %}
      </div>
    </div>
  </div>

  {% block after_header %}{% endblock %}
</header>