overlay-teaser-content

// src/components/template-components/overlay-teaser/overlay-teaser-content/overlay-teaser-content.html.twig

{#
 ATTENTION:
 Drupal never renders this template directly on the page because of caching reasons.
 Therefore it gets getting prerendered on the Backend and served by an API endpoint.
 The Frontend is going to consume the rendered markup via XHR.
#}

<div class="OverlayTeaser-content js-OverlayTeaser-content{% if one_click %} OverlayTeaser-content--oneClick{% endif %}">
  <div class="OverlayTeaser-closed js-OverlayTeaser-closed{% if is_open %} is-hidden{% endif %}">
    {% if one_click %}
      <button class="OverlayTeaser-closeButton OverlayTeaser-closeButton--textLess js-OverlayTeaser-closeButton" type="button">
        <span class="u-hiddenVisually">Schließen </span>
        {% include "@elements/icon/icon.html.twig" with {name: "cross", class: "OverlayTeaser-icon"} only %}
      </button>
    {% endif %}
    <div class="OverlayTeaser-image">{{ image }}</div>
    <div class="OverlayTeaser-text">
      <h2 class="OverlayTeaser-headline u-typo-headline3">{{ headline.closed|german_quotes }}</h2>
      {% if one_click %}
        <a href="{{ buttons|first.url }}" class="OverlayTeaser-openButton Tracking--overlayTeaserOpenButton">
          <span class="u-hiddenVisually">Weitere Informationen über „{{ headline.closed|german_quotes }}" anzeigen</span>
          {% include "@elements/icon/icon.html.twig" with {name: "double-arrow-right"} only %}
        </a>
      {% else %}
        <button class="OverlayTeaser-openButton js-OverlayTeaser-openButton Tracking--overlayTeaserOpenButton" aria-expanded="false" aria-controls="OverlayTeaser-opened" type="button">
          <span class="u-hiddenVisually">Weitere Informationen anzeigen</span>{% include "@elements/icon/icon.html.twig" with {name: "double-arrow-down"} only %}
        </button>
      {% endif %}
    </div>
  </div>
  {% if not one_click %}
    <div id="OverlayTeaser-opened" class="OverlayTeaser-opened js-OverlayTeaser-opened{% if not is_open %} is-hidden{% endif %}">
      <div class="OverlayTeaser-openedContent">
        <button class="OverlayTeaser-closeButton js-OverlayTeaser-closeButton u-typo-copy-bold is-light" type="button">
          Schließen {% include "@elements/icon/icon.html.twig" with {name: "cross", class: "OverlayTeaser-icon"} only %}
        </button>
        <div class="OverlayTeaser-image">{{ image }}</div>
        <div class="OverlayTeaser-text">
          {% if headline.opened %}
            <h3 class="OverlayTeaser-headline u-typo-headline4">{{ headline.opened|german_quotes }}</h3>
          {% endif %}
          {% if copy %}
            <p class="OverlayTeaser-copy">{{ copy|german_quotes }}</p>
          {% endif %}
          {% if buttons %}
            {% include "@patterns/buttons/buttons.html.twig" with {buttons: buttons, class: "OverlayTeaser-buttons Tracking--overlayTeaserButtons", embedded: true} only %}
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
</div>