quote

Information

Folder
src/components/patterns/quote

Files

Schema
Mocks
Template
// src/components/patterns/quote/quote.html.twig

<div class="Quote u-container u-grid{% if class %} {{ class }}{% endif %}{% if image %} Quote--withImage{% endif %}">
  <div class="Quote-imageContainer">
    {% if image %}
      <div class="Quote-image{% if circular_image %} Quote-image--circular{% endif %}">
        {{ image|raw }}
        {% if image_copyright %}
          <div class="Quote-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</div>
        {% endif %}
      </div>
    {% else %}
      <span class="Quote-symbol" aria-hidden="true">“</span>
    {% endif %}
  </div>
  <figure class="Quote-content{% if image %} Quote-content--paddingless{% endif %}">
    <blockquote class="u-typo-big-copy-subline Quote-cite">{{ cite|german_quotes }}</blockquote>
    {% if author %}
      <figcaption class="Quote-author">
        {% if author.name %}
          {% if link %}
            <a class="Quote-authorLink u-typo-copy-bold u-brandLink" href="{{ link }}">{{ author.name|german_quotes }}</a>
          {% else %}
            <p class="Quote-authorName u-typo-copy-bold">{{ author.name|german_quotes }}</p>
          {% endif %}
        {% endif %}
        {% if author.position %}
          <p class="Quote-authorPosition">{{ author.position|german_quotes }}</p>
        {% endif %}
      </figcaption>
    {% endif %}
  </figure>
</div>

Variants

default
Open

default mock data

Raw
Resolved
with image
Open

with image mock data

Raw
Resolved
with link
Open

with link mock data

Raw
Resolved