simple-s3-gallery/templates/card.html

<div class="card shadow-sm">

{% if this.headline and this.headline|length >= 1 and not this.title %}
  <div class="card-header position-relative">

  {{ this.headline }}

  {% if gallery.reactions_enabled|default(False) %}
    <a href="#" class="btn btn-link float-end">
      <i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
    </a>
  {% endif %}

  </div>
{% endif %}

  <img
    class="card-image-top"
    src="{{ this.src }}"
    alt="{{ this.alt_text if this.alt_text else this.title }}"
  />

{% if this.description and this.description|length >= 1 %}
  <div class="card-body position-relative">

  {% if this.title and this.title|length >= 1 %}
    <h5 class="card-title">{{ this.title }}</h5>

    {% if this.subtitle and this.subtitle|length >= 1 %}
    <h6 class="card-subtitle mb-2 text-body-secondary">{{ this.subtitle }}</h6>
    {% endif %}

    {% if gallery.reactions_enabled|default(False) %}
    <a href="#" class="btn btn-link position-absolute bottom-1 end-0">
      <i class="bi-heart-fill text-danger"></i>
    </a>
    {% endif %}
  {% endif %}

    <p class="card-text">{{ this.description }}</p>

  {% if this.subtext and this.subtext|length >= 1 %}
    <p class="card-text">
      <small class="text-body-secondary">
        {{ this.subtext }}
      </small>
    </p>
  {% endif %}

  </div>
{% endif %}

{# Don't render reaction section if disabled or max reactions are zero (or less) #}
{% if gallery.reactions_enabled|default(False) or gallery.max_reactions_per_card|int <= 0 %}
  {% include 'card_reaction_section.html' %}
{% endif %}

</div>