Pattern Library

<div class="__js-root">
  <div class="header-carousel">
    <div class="block h-[700px] xl:h-screen relative">
      <img
        class="
          header-carousel--image
          lg:hidden
        "
        src="{{ mobile_background_image_url }}"
      >

      <img
        class="
          header-carousel--image
          hidden lg:block
        "
        src="{{ desktop_background_image_url }}"
      >

      <div class="onboarding--header-carousel-text-wrapper h-full" style="box-sizing: border-box">
        <div
          class="
            container--wide px-0 h-full flex flex-col justify-center items-start gap-6
          "
          style="box-sizing: border-box"
        >

          <h1 class="px-5 flex flex-col text-black whitespace-pre-line">
            {{ heading|safe }}
          </h1>

          <div class="ml-4 text-lg">
            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black duration-300 hover:bg-black hover:text-white" %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>