checkout-list-item

Information

Folder
src/components/patterns/form/checkout/checkout-list/checkout-list-item

Files

Schema
Mocks
Template
// src/components/patterns/form/checkout/checkout-list/checkout-list-item/checkout-list-item.html.twig

<div class="CheckoutListItem{% if class %} {{ class }}{% endif %}">
  <div class="CheckoutListItem-header u-grid">
    <h2 class="CheckoutListItem-headline u-typo-headline6">
      {% include "@elements/icon/icon.html.twig" with {name: icon, class: "CheckoutListItem-icon"} only %}
      {{ headline }}
    </h2>
  </div>

  <div class="CheckoutListItem-content">
    {% if amount or copy %}
      {% set typo_class = amount ? 'u-typo-big-copy-subline' : '' %}
      {% set description = amount ? 'Ich unterstütze Greenpeace e.V. <span class="CheckoutListItem-descriptionHighlight u-typo-headline5">' ~ amount.frequency ~ '</span> mit einem Betrag von <span class="CheckoutListItem-descriptionHighlight u-typo-headline5">' ~ amount.value ~ '</span>' : copy %}
      <div class="CheckoutListItem-text u-grid">
        <p class="CheckoutListItem-description {{ typo_class }}">{{ description|raw }}</p>
        {% if show_green_strip %}
          <div class="CheckoutListItem-description">
            {% set doubled_yearly_amount = (amount.numeric * 2 * amount.interval_count)|number_format(2, ',', '.') %}
            {% include "@patterns/green-strip/green-strip.html.twig" with {content: 'Sie sind großartig – und jetzt sogar doppelt wirksam! Denn eine großzügige Person verdoppelt für ein Jahr Ihre Spende auf <strong>' ~ doubled_yearly_amount ~ ' €</strong>.'} only %}
          </div>
        {% endif %}
      </div>
    {% else %}
      <dl class="CheckoutListItem-list u-grid">
        {% for item in list %}
        <dt class="CheckoutListItem-label">{{ item.label }}</dt>
        <dd class="CheckoutListItem-value u-typo-copy-bold">{{ item.value }}</dd>
        {% endfor %}
      </dl>
    {% endif %}
  </div>
</div>

Variants

Donation Amount
Open

Donation Amount mock data

Raw
Resolved
Personal Data
Open

Personal Data mock data

Raw
Resolved
Payment
Open

Payment mock data

Raw
Resolved
Gift
Open

Gift mock data

Raw
Resolved
Material order
Open

Material order mock data

Raw
Resolved