teaser

// src/components/elements/teaser/teaser.html.twig

{% if teaser_tenant == "kids" and tenant != "kids" %}
  {% set tenant = "visualKids" %}
{% endif %}

<article class="Teaser
  {%- if class %} {{ class }}{% endif -%}
  {%- if teaser_type %} Teaser--{{ teaser_type }}{% endif -%}
  {%- if teaser_variant %} Teaser--{{ teaser_variant }}{% endif -%}
  {%- if teaser_variant == "petition" %} js-Teaser--petition{% endif -%}
  {%- if tenant %} Teaser--{{ tenant }}{% endif -%}"
  {%- if teaser_variant == "petition" and id %} data-id="{{ id }}"{% endif -%}
>
  <div class="Teaser-image">
    {% if material_type %}<span class="Teaser-label u-typo-copy-bold">{{ material_type }}</span>{% endif %}
    {{ image|raw }}
    {% if image_copyright %}
      <span class="Teaser-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</span>
    {% endif %}
  </div>
  <div class="Teaser-text">
    <div class="Teaser-headlineContainer">
      {% if teaser_variant == "engagement" %}
        <span class="Teaser-engagementLabel u-typo-label-small">Petition</span>
      {% endif %}
      <h3 class="Teaser-headline {% if teaser_type == "small" %}u-typo-headline4-desktop-headline3-mobile{% else %}u-typo-headline3{% endif %}">
        <span class="u-paddedText">{{ headline|german_quotes }}</span>
      </h3>
    </div>
    <div class="Teaser-content">
      {% if tenant == "visualKids" %}
        {% include "@elements/icon/icon.html.twig" with {
          class: "Teaser-visualKidsLogo",
          name: "logo--kids",
        } only %}
      {% elseif format or date %}
        <div class="Teaser-metaInfo">
          {% if format %}
            <span class="Teaser-formatLink u-typo-label-small">{{ format.label }}</span>
          {% endif %}
          {% if date %}
            <time class="u-typo-copy-small" datetime="{{ datetime }}">{{ date }}</time>
          {% endif %}
        </div>
      {% endif %}
      {% if copy %}
        <p class="Teaser-copy">{{ copy|german_quotes }}</p>
      {% endif %}
      {% if teaser_variant == "petition" and id %}
        {% include "@elements/progress-bar/progress-bar.html.twig" with {
          class: "js-Teaser-progressBar Teaser-progressBar",
          minimal: true,
        } only %}
      {% endif %}
      {% if not teaser_variant %}
      <a href="{{ url }}" class="Tracking--teaserLink Teaser-link u-brandLink u-typo-copy-bold">
        <span class="Teaser-linkIcons">
          <span class="Teaser-linkIcon Teaser-linkIcon--default"></span>
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Teaser-linkIcon Teaser-linkIcon--hover"
          } only %}
        </span>
        {{ label ? label : "Mehr erfahren" }} <span class="u-hiddenVisually"> über {{ headline|german_quotes }}</span>
      </a>
      {% else %}
        {% include "@elements/button/button.html.twig" with {
          label: label ? label : "Mehr erfahren",
          class: "Teaser-linkButton",
          icon: "edit",
          url: url,
        } only %}
      {% endif %}
    </div>
  </div>
</article>