Quote

// src/components/patterns/quote/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/quote
additionalProperties: false
required:
  - cite
properties:
  image:
    type: string
    format: html
  circular_image:
    type: boolean
  image_copyright:
    type: string
  author:
    type: object
    properties:
      name:
        type: string
      position:
        type: string
  cite:
    type: string
  link:
    type: string
    format: uri-reference

// src/components/patterns/quote/mocks.yaml

author:
  name: Vorname Nachname
  position: Position des Zitatinhabers
cite: >-
  Ständige Eingriffe der Menschen in die Natur haben schwere Folgen - dabei ist
  der Wald unser bester Verbündeter im Klimaschutz.
$variants:
  - $name: with image
    image:
      $tpl: elements/image
      width: 160
      height: 160
      src: https://placehold.co/160x160
      alt: Alternative text
      id: 13
      sources:
        - width: 80
          height: 80
          srcset: https://placehold.co/80x80
          media: '(max-width: 35.5625rem)'
        - width: 80
          height: 80
          srcset: https://placehold.co/80x80
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 160
          height: 160
          srcset: https://placehold.co/160x160
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 160
          height: 160
          srcset: https://placehold.co/160x160
          media: '(min-width: 80rem)'
    image_copyright: © Erika Musterfrau
    circular_image: true
  - $name: with link
    link: url

// 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 }}</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 }}</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 }}</a>
          {% else %}
            <p class="Quote-authorName u-typo-copy-bold">{{ author.name }}</p>
          {% endif %}
        {% endif %}
        {% if author.position %}
          <p class="Quote-authorPosition">{{ author.position }}</p>
        {% endif %}
      </figcaption>
    {% endif %}
  </figure>
</div>