seeds_tailwind-1.0.x-dev/components/sui_card/pattern-sui-card.html.twig

{% if variant and variant|lower == 'default' %}
  <div class="sui-card-{{ variant }} relative group overflow-hidden rounded-{{ props.raduis }} {{ props.extra_wrapper_class }}">
    {% if slots.image %}
      <div class="sui-card-{{ variant }}-image duration-500 transition-all {% if props.image_scale %} group-hover:scale-[1.12] {% endif %}">
        {{ slots.image }}
      </div>
    {% endif %}

    <div class="sui-card-content p-4 inset-0 flex flex-col items-start absolute text-{{ props.text_color }} bg-[rgb(0,0,0,{{ props.background_brightness }})] {{ props.text_position }} {{ props.content_wrapper_extra_class }}">
      {% if slots.title %}
        <div class="sui-card-{{ variant }}-title mb-4">{{ slots.title }}</div>
      {% endif %}
      {% if slots.body %}
        <div class="sui-card-{{ variant }}-body mb-4">{{ slots.body }}</div>
      {% endif %}
      {% if slots.link %}
        <div class="sui-card-{{ variant }}-link">{{ slots.link }}</div>
      {% endif %}
    </div>
  </div>

{% elseif variant and variant|lower == 'animated' %}
  <div class="sui-card-{{ variant }} group relative overflow-hidden rounded-{{ props.raduis }} {{ props.extra_wrapper_class }}">
    {% if slots.image %}
      <div class="sui-card-{{ variant }}-image duration-500 perspective-1000 transition-all {% if props.image_scale %} group-hover:scale-[1.12] {% endif %}">
        {{ slots.image }}
      </div>
    {% endif %}

    <div class="sui-card-{{ variant }}-content p-4 inset-0 flex flex-col items-start absolute text-{{ props.text_color }} bg-[rgb(0,0,0,{{ props.background_brightness }})] {{ props.content_wrapper_extra_class }}">
      {% if slots.title %}
        <div class="sui-card-{{ variant }}-title absolute bottom-0 duration-500 transition-all mb-4 group-hover:bottom-[50%]">
          {{ slots.title }}
        </div>
      {% endif %}

      <div class="duration-500 transition-all absolute bottom-[-50%] group-hover:bottom-[40%]">
        {% if slots.body %}
          <div class="sui-card-{{ variant }}-body mb-4">{{ slots.body }}</div>
        {% endif %}
        {% if slots.link %}
          <div class="sui-card-{{ variant }}-link">{{ slots.link }}</div>
        {% endif %}
      </div>
    </div>
  </div>
{% endif %}