checkout-list-item

// 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>