gift-certificate

// src/components/patterns/gift-certificate/gift-certificate.html.twig

<div class="GiftCertificate u-container Tracking--giftCertificate">
  <div class="u-grid">
    <h1 class="GiftCertificate-title u-typo-headline2-desktop-headline1-mobile">{{ title }}</h1>
  </div>
  <div class="u-grid">
    <div class="GiftCertificate-text">
      <h2 class="GiftCertificate-headline u-typo-headline3">{{ headline }}</h2>
      <p class="GiftCertificate-copy">{{ copy }}</p>
      <div class="GiftCertificate-imageHolder GiftCertificate-imageHolder--mobile">
        {% if send_event_form %}
          {{ image|raw }}
          {% if image_copyright %}
            <figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image_copyright }}</figcaption>
          {% endif %}
        {% else %}
          <img src="{{ image.src }}" alt="{{ image.alt }}" class="GiftCertificate-image" width="{{ image.width }}" height="{{ image.height }}">
          {% if image.copyright %}<figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image.copyright }}</figcaption> {% endif %}
        {% endif %}
      </div>
      <div class="GiftCertificate-share">
        <h3 class="GiftCertificate-shareHeadline u-typo-headline6">{{ services_headline }}</h3>
        <a href="mailto:?{{ send_event_form ? 'subject=Mach mit - meine Spendenaktion für Greenpeace&' : '' }}body={% if send_event_form and mail_copy %}{{ mail_copy }}%0A%0A {% endif %}{{ download_pdf_url|url_encode }}" target="_blank" rel="noopener" class="GiftCertificate-shareLink">
          {% include "@elements/icon/icon.html.twig" with {
            class: "GiftCertificate-shareIcon",
            name: "mail-rounded"
          } only %}
          <span class="u-hiddenVisually">Per E-Mail senden:</span>
        </a>
      </div>
      {% if not send_event_form %}
        {% include "@elements/button/button.html.twig" with {
          label: "PDF anzeigen",
          class: "GiftCertificate-button",
          url: download_pdf_url,
          icon: "eye",
          mutation: "secondary",
          target: "_blank",
        } only %}
      {% endif %}
    </div>
    <div class="GiftCertificate-imageHolder GiftCertificate-imageHolder--desktop">
      {% if send_event_form %}
        {{ image|raw }}
        {% if image_copyright %}
          <figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image_copyright }}</figcaption>
        {% endif %}
      {% else %}
        <img src="{{ image.src }}" alt="{{ image.alt }}" class="GiftCertificate-image" width="{{ image.width }}" height="{{ image.height }}">
        {% if image.copyright %}<figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image.copyright }}</figcaption> {% endif %}
      {% endif %}
    </div>
  </div>
</div>