motive-lightbox

// src/components/patterns/motive/motive-lightbox/motive-lightbox.html.twig

<div class="MotiveLightbox">
  <div class="MotiveLightbox-content">
      <div class="MotiveLightbox-media">
        {% for item in items %}
          <div class="js-MotiveLightbox-image MotiveLightbox-image" data-variant="motive-variant-{{ item.value }}">
            <img class="MotiveLightbox-imageElement" src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="463" height="261">
            {% if item.image.copyright %}<span class="MotiveLightbox-copyright">{{ item.image.copyright }}</span>{% endif %}
          </div>
        {% endfor %}
        </span>
      </div>
    <span class="MotiveLightbox-text js-MotiveLightbox-text"></span>
    <div class="MotiveLightbox-footer">
      <p class="MotiveLightbox-footnote">Diese Spende ist ein wertvoller Beitrag zum Schutz unserer Erde. Nur dank Unterstützung wie dieser kann Greenpeace sich weltweit für eine gesunde Natur, den Erhalt der Artenvielfalt und den Schutz unserer Lebensgrundlagen einsetzen.</p>
    </div>
  </div>
</div>