donation-example

Information

Folder
src/components/elements/donation-example

Files

Schema
Mocks
Template
// src/components/elements/donation-example/donation-example.html.twig

{% if is_template %}
  <template class="js-DonationExampleTemplate"
    {%- for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor -%}
  >
{% endif %}
  <article class="DonationExample js-DonationExample
    {%- if class %} {{ class }}{% endif -%}
    {%- if small %} DonationExample--small{% endif -%}"
    {%- for attribute in data_attributes %} data-{{ attribute.key }}="{{ attribute.value }}"{% endfor -%}
  >
    {% if image %}
      <div class="DonationExample-image">
        {{ image|raw }}
        {% if image_copyright and not small %}
          <span class="DonationExample-copyright u-typo-copy-small">{{ image_copyright }}</span>
        {% endif %}
      </div>
    {% endif %}
    <div class="DonationExample-text">
      {% if amount %}
        <span class="DonationExample-amount u-typo-headline4-desktop-headline3-mobile">{{ amount }}</span>
      {% endif %}
      {% if headline %}
        <h3 class="DonationExample-headline u-typo-headline4-desktop-headline3-mobile">
          <span class="u-paddedText">{{ headline }}</span>
        </h3>
      {% endif %}
      {% if copy %}
        <div class="DonationExample-copy{%- if small %} u-typo-copy-desktop-copy-small-mobile{% endif %}">{{ copy|raw }}</div>
      {% endif %}
    </div>
  </article>
{% if is_template %}
  </template>
{% endif %}

Variants

large
Open

large mock data

Raw
Resolved
small
Open

small mock data

Raw
Resolved
small without image
Open

small without image mock data

Raw
Resolved