teasers

// src/components/patterns/teasers/teasers.html.twig

<div class="Teasers{% if not as_element %} u-container{% endif %}{% if class %} {{ class }}{% endif %} Teasers--{{ columns }}columns">
  {% if headline %}
    <h2 class="Teasers-headline{% if tenant %} Teasers-headline--{{ tenant }}{% endif %}">
      {% if tenant and tenant == "kids" %}
        {% include "@elements/icon/icon.html.twig" with {
          name: "decoration-teasers-left",
          class: "Teasers-decoration Teasers-decoration--left",
        } only %}
      {% endif %}
      {{ headline|german_quotes }}
      {% if tenant and tenant == "kids" %}
        {% include "@elements/icon/icon.html.twig" with {
          name: "decoration-teasers-right",
          class: "Teasers-decoration Teasers-decoration--right",
        } only %}
      {% endif %}
    </h2>
  {% endif %}
  <div class="Teasers-itemsHolder u-grid">
    {% for item in items %}
      {% set teaser_type %}
        {%- if item.teaser_type -%}
          {{ item.teaser_type }}
        {%- else -%}
          {%- if columns == 1 -%}
            landscape
          {%- elseif columns == 2 -%}
            middle
          {%- else -%}
            small
          {%- endif -%}
        {%- endif -%}
      {%- endset -%}
      {% set item = item|merge({
        class: "Teasers-item",
        teaser_type: teaser_type,
        tenant: tenant
      }) %}
      {% include "@elements/teaser/teaser.html.twig" with item only %}
    {% endfor %}
  </div>
</div>