infobox

// src/components/patterns/infobox/infobox.html.twig

<article class="Infobox u-container{% if class %} {{ class }}{% endif %}">
  <div class="Infobox-content">
    {% include "@elements/icon/icon.html.twig" with {
      name: "material",
      class: "Infobox-icon"
    } only %}
    {% if headline %}
      <h3 class="Infobox-headline u-typo-headline4">{{ headline|german_quotes }}</h3>
    {% endif %}
    <div class="Infobox-columns Infobox-columns--{{ items.length }}">
      {% for item in items %}
        <div class="Infobox-column">
          {% if item.headline %}
            <h4 class="Infobox-columnHeadline u-typo-headline5">{{ item.headline|german_quotes }}</h4>
          {% endif %}
          {% if item.media %}
            {% include "@elements/media-template/media-template.html.twig" with item.media|merge({class: "Infobox-columnMedia"}) only %}
          {% endif %}
          {% if item.rte %}
            {% include "@elements/rte/rte.html.twig" with item.rte|merge({class: "Infobox-columnRte"}) only %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</article>