material

Information

Folder
src/components/patterns/material

Files

Schema
Mocks
Template
// 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>

Variants

Publication
Open

Publication mock data

Raw
Resolved
Publication with alt pdf and url
Open

Publication with alt pdf and url mock data

Raw
Resolved
Education
Open

Education mock data

Raw
Resolved
Education with email button
Open

Education with email button mock data

Raw
Resolved
Info
Open

Info mock data

Raw
Resolved
Info as element
Open

Info as element mock data

Raw
Resolved
Info with radio buttons
Open

Info with radio buttons mock data

Raw
Resolved