material

// src/components/patterns/material/material.html.twig

<div class="Material Tracking--material u-grid{% if as_element %} Material--element{% else %} u-container{% endif %}{% if class %} {{ class }}{% endif %}" data-type="{{ material_type }}" data-headline="{{ headline }}">
  <div class="Material-content">
    {% if image %}
      <div class="Material-imageHolder{% if material_type %} Material-imageHolder--{{ material_type }}{% endif %}">
        {% if label %}<span class="Material-label u-typo-copy-bold">{{ label }}</span>{% endif %}
        <img class="Material-image" src="{{ image.src }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">
      </div>
    {% endif %}
    <div class="Material-text">
      {% if headline %}
        <h2 class="Material-headline u-typo-headline5">{{ headline }}</h2>
      {% endif %}
      {% if copy %}
        <div class="Material-item Rte">{{ copy|raw }}</div>
      {% endif %}
      {% if date %}
        <time class="Material-item u-typo-copy-small" datetime="{{ date_time|date("Y-m-d") }}">Veröffentlichungsdatum: {{ date }}</time>
      {% endif %}
      {% if pages or format %}
        <p class="Material-item u-typo-copy-small">
          {%- if pages %}Anzahl Seiten: {{ pages }}{% endif -%}
          {%- if pages and format %}&nbsp;|&nbsp;{% endif -%}
          {%- if format %}Format: {{ format }}{% endif -%}
        </p>
      {% endif %}
      {% if size %}
        <p class="Material-size Material-item u-typo-copy-small-bold">Dateigröße: {{ size }}</p>
      {% endif %}
      {% if alt_pdf_url or alt_link %}
        <div class="Material-alternatives">
          {% if alt_pdf_url %}
            <a href="{{ alt_pdf_url }}" class="u-brandLink u-typo-copy-bold" target="_blank" rel="noopener">{{ alt_pdf_label }}</a>
          {% endif %}
          {% if alt_link %}
            <a href="{{ alt_link.url }}" class="u-brandLink u-typo-copy-bold">{{ alt_link.label }}</a>
          {% endif %}
        </div>
      {% endif %}
      {% if material_type == "info" or material_type == "testament" %}
    </div>
    <div class="Material-inputs">
      {% if options %}
        {{ options }}
      {% endif %}
      {{ quantity|raw }}
    {% endif %}
      {% if url %}
        {% include "@elements/button/button.html.twig" with {
          label: "Herunterladen",
          class: "Material-button Tracking--materialDownloadBtn",
          url: url,
          icon: "download"
        } only %}
      {% endif %}
      {% if order_by_email %}
        {% include "@elements/button/button.html.twig" with {
          label: "Per Mail bestellen",
          class: "Material-button",
          url: 'mailto:bildung@greenpeace.de?subject=' ~ (headline|url_encode),
          icon: "mail"
        } only %}
      {% endif %}
    </div>
  </div>
</div>