greenwire-teaser

// src/components/patterns/greenwire-teaser/greenwire-teaser.html.twig

<article class="GreenwireTeaser">
  {%- if headline %}
    <h2 class="GreenwireTeaser-headline u-container u-typo-headline3">
      <span class="GreenwireTeaser-headlineBackground">{{ headline|german_quotes }}</span>
    </h2>
  {% endif -%}
  <div class="GreenwireTeaser-content">
    <div class="u-container u-grid">
      <div class="GreenwireTeaser-mainInfo">
        <div class="GreenwireTeaser-mobileContainer">
          <div class="GreenwireTeaser-mobileHolder">
            {% if content_headline %}
              <h3 class="GreenwireTeaser-contentHeadline u-typo-headline4">{{ content_headline|german_quotes }}</h3>
            {% endif %}
            {% if details %}
              <div class="GreenwireTeaser-details">
                {% if details.group_form %}
                  <span class="u-typo-label-small">Gruppenform: {{ details.group_form|german_quotes }}</span>
                {% endif %}
                {% if details.topic %}
                  <span class="GreenwireTeaser-topic {{ details.group_form ? "u-typo-copy-small" : "u-typo-label-small GreenwireTeaser-topic--withoutGroupForm" }}">Thema: {{ details.topic|german_quotes }}</span>
                {% endif %}
              </div>
            {% endif %}
          </div>
          <div class="GreenwireTeaser-image GreenwireTeaser-image--mobile">
            <span class="GreenwireTeaser-decoration"></span>
            <span class="GreenwireTeaser-decoration"></span>
            {{ image|raw }}
            {% if image_copyright %}
              <span class="GreenwireTeaser-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</span>
            {% endif %}
          </div>
        </div>
        {% if copy %}
          <p class="GreenwireTeaser-copy">{{ copy|german_quotes }}</p>
        {% endif %}
        {% if button %}
          {% include "@elements/button/button.html.twig" with button|merge({
            class: "GreenwireTeaser-button",
            target: "_blank",
            icon: "external-link",
          }) only %}
        {% endif %}
      </div>
      <div class="GreenwireTeaser-additionalInfo{% if additionalInfo|length < 3  %} GreenwireTeaser-additionalInfo--middleAligment{% endif %}">
        {% if additionalInfo.label %}
          <h4 class="GreenwireTeaser-additionalInfolabel u-typo-label-small">{{ additionalInfo.label|german_quotes }}</h4>
          <img class="GreenwireTeaser-logo" src="{{ asset_path().toString() ~ "images/greenwire.png" }}" alt="Greenpeace Greenwire logo" width="300" height="63">
          {% if additionalInfo.date or additionalInfo.place or additionalInfo.time %}
            <dl class="GreenwireTeaser-moreDetails">
              {% if additionalInfo.date %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Datum:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.date|german_quotes }}</dd>
              {% endif %}
              {% if additionalInfo.place %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Ort:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.place|german_quotes }}</dd>
              {% endif %}
              {% if additionalInfo.time %}
                <dt class="GreenwireTeaser-moreDetailsTermin u-typo-copy-bold">Zeit:</dt>
                <dd class="GreenwireTeaser-moreDetailsDescription">{{ additionalInfo.time|german_quotes }}</dd>
              {% endif %}
            </dl>
          {% endif %}
          {% if additionalInfo.copy %}
            <p class="GreenwireTeaser-additionalInfoCopy u-typo-copy-small">{{ additionalInfo.copy|german_quotes }}</p>
          {% endif %}
        {% endif %}
      </div>
      <div class="GreenwireTeaser-imageContainer GreenwireTeaser-image--desktop">
        <div class="GreenwireTeaser-image">
          <span class="GreenwireTeaser-decoration"></span>
          <span class="GreenwireTeaser-decoration"></span>
          {{ image|raw }}
          {% if image_copyright %}
            <span class="GreenwireTeaser-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</article>