Pattern Library

<div class="flip-card" tabindex="0">
  <div class="flip-card-inner">
    <div
      class="flip-card-front rounded-3xl bg-cover"

      {% if background_url %}
        style="
          background-image: url('{{ background_url }}')
        "
      {% endif %}
    >
      <div
        class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
        style="
          {% if not background_url %}
            background-color: {{ bg_color }};
          {% endif %}

          {% if image_url %}
            background-image: url('{{ image_url }}')
          {% endif %}
        "
      >
        {% if not background_url %}
          <div
            class="
              absolute top-0 left-0

              border border-r-[27rem] border-r-[transparent]
              border-l-0 border-t-[33rem]
            "
            style="border-top-color: {{ bg_color }}"
          ></div>
        {% endif %}

        <h1
          class="
            font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
          "
          {% if title_color %}
            style="color: {{ title_color }}"
          {% endif %}
        >{{ title }}</h1>

        <div
          class="
            bottom-8 left-8 text-left

            absolute block text-white opacity-75 leading-5 font-condensed

            md:hidden
          "
        >
          Pro zobrazení detailů
          <br>
          se dotkni karty.
        </div>
      </div>
    </div>
    <div
      class="flip-card-back rounded-3xl p-10"
      style="background-color: {{ bg_color }}"
    >
      <div class="prose prose-black">
        {% comment %}
          WARNING: This is generated by the styleguide implementation.
          Don't keep the |safe!
        {% endcomment %}

        {{ content|safe }}
      </div>

      {% if button_text %}
        <div class="flex justify-center items-center my-5">
          {% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
        </div>
      {% endif %}
    </div>
  </div>
</div>