Checkout Info

// src/components/patterns/form/checkout/checkout-info/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/form/checkout/checkout-info
additionalProperties: false
required:
  - headline
  - copy
  - sub_title
  - details
properties:
  headline:
    type: string
  copy:
    type: string
  sub_title:
    type: string
  details:
    type: array

// src/components/patterns/form/checkout/checkout-info/mocks.yaml

headline: Unser Infomaterial ist und bleibt kostenlos
copy: >-
  Allerdings freuen wir uns, wenn Sie sich an den Herstellungs- und
  Versandkosten freiwillig beteiligen möchten.
sub_title: 'Unsere Bankverbindung:'
details:
  - label: null
    value: GLS Gemeinschaftsbank eG
  - label: IBAN
    value: DE22 4306 0967 0000 0334 02
  - label: BIC
    value: GENODEM 1 GLS
  - label: Verwendungszweck
    value: Infomaterial

// src/components/patterns/form/checkout/checkout-info/checkout-info.html.twig

<div class="CheckoutInfo u-grid">
  <div class="CheckoutInfo-content">
    {% if headline %}
      <h4 class="CheckoutInfo-headline u-typo-headline4">{{ headline }}</h4>
    {% endif %}
    {% if copy %}
      <p class="CheckoutInfo-copy">{{ copy }}</p>
    {% endif %}
    {% if sub_title %}
      <p class="CheckoutInfo-subtitle u-typo-copy-bold">{{ sub_title }}</p>
    {% endif %}
    <dl class="CheckoutInfo-details">
      {% for item in details %}
        <dt class="CheckoutInfo-detailsLabel">{% if item.label %}{{ item.label }}:&nbsp;{% endif %}</dt>
        <dd class="CheckoutInfo-detailsValue">{{ item.value }}</dd>
      {% endfor %}
    </dl>
  </div>
</div>