simple-s3-gallery/templates/card.html

<div class="col">
  <div class="card shadow-sm">
    <div class="card-header">
      <span class="flex">{{ gallary.title }}</span>
      <a
        href="#"
        class="btn btn-link float-end"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        data-bs-title="Add a reaction"
      >
        <i class="bi-heart-fill text-end" style="font-size: 1rem; color: pink;"></i>
      </a>
    </div>

    <img
      class="card-image-top"
      width="{{ gallary.width | default('100%') }}"
      height="{{ gallary.height | default('225') }}"
      src="{{ gallary.src }}"
      alt="{{ gallary.alt_text if gallary.alt_text else gallary.title }}"
    />

    <div class="card-body">
      <p class="card-text">{{ gallary.description | default('') }}</p>
    </div>

    <div class="card-footer text-body-secondary text-end">
      {% if gallary.reactions %}
        {% for reaction in gallary.reactions %}
        {# TODO: limit total number of reactions shown #}
      <span class="badge rounded-pill">
        <i class="bi-{{ reaction }}" style="color: black;"></i>
      </span>
        {% endfor %}
      {% endif %}
    </div>

  </div>
</div>