lightbox

// src/components/elements/lightbox/lightbox.html.twig

{#
  Only when there is an opener element, the javascript functionality gets applied
#}

<div class="Lightbox{% if not hide_opener %} js-Lightbox{% endif %}{% if class %} {{ class }}{% endif %}"{% for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor %}>
  {% if not hide_opener %}
    {% block opener %}
      <button class="js-Lightbox-opener" type="button">Click to open lightbox</button>
    {% endblock %}
  {% endif %}
  <span class="Lightbox-overlay{% if clickable_overlay %} js-Lightbox-overlay{% endif %}"></span>
  <div class="Lightbox-content{% if wide %} Lightbox-content--wide{% endif %}" role="dialog" aria-labelledby="Lightbox-title-{{ id }}" aria-describedby="Lightbox-copy-{{ id }}" aria-modal="true">
    {% if not hide_close_button %}
      <button class="Lightbox-closeButton js-Lightbox-closeButton u-typo-copy-bold u-brandLink" type="button">
        Schließen
        {% include "@elements/icon/icon.html.twig" with {
          name: "cross",
          class: "Lightbox-closeIcon"
        } only %}
      </button>
    {% endif %}
    {% if image %}
      <img class="Lightbox-img" alt="{{ image.alt }}" height="{{ image.height }}" width="{{ image.width }}" src="{{ image.src }}">
    {% endif %}
    {% if title %}
      <p id="Lightbox-title-{{ id }}" class="Lightbox-title js-Lightbox-title u-typo-headline5">{{ title }}</p>
    {% endif %}
    {% if rendered_content %}
      {{ rendered_content }}
    {% endif %}
    {% if copy %}
      <div id="Lightbox-copy-{{ id }}" class="Lightbox-copy js-Lightbox-copy Rte">{{ copy|raw }}</div>
    {% endif %}
    {% if link %}
      <{% if link.url %}a href="{{ link.url }}" {% else %}button type="button" {% endif %}class="Lightbox-link js-Lightbox-link u-typo-copy-bold u-brandLink">{{ link.label }}</{% if link.url %}a{% else %}button{% endif %}>
    {% endif %}
    {% if footer %}
      <div class="Lightbox-footer Rte">{{ footer }}</div>
    {% endif %}
  </div>
</div>