testimonial

// src/components/patterns/testimonial/testimonial.html.twig

{% set id = "EndOfTestimonials-" ~ random() %}
{% set colors = ['green', 'blue', 'orange'] %}

<section class="Testimonial js-Testimonial">
  {% if headline %}
    <h2 class="Testimonial-headline u-typo-headline2 u-container">{{ headline|german_quotes }}</h2>
  {% endif %}
  <div class="Testimonial-content js-Testimonial-content">
    <div class="Testimonial-track js-Testimonial-track">
      <ul class="Testimonial-list js-Testimonial-list">
        {% for item in items %}
          {% set color = colors[loop.index0 % 3] %}
          <li class="Testimonial-slide js-Testimonial-slide Testimonial-slide--{{ color }}">
            <blockquote class="Testimonial-card">
              <div class="Testimonial-cardHead">
                {% if item.image %}
                  <div class="Testimonial-image">
                    {{ item.image|raw }}
                  </div>
                {% endif %}
                <span class="Testimonial-quoteIcon" aria-hidden="true">
                  {% include "@elements/icon/icon.html.twig" with {name: "apostrophe_" ~ color} only %}
                </span>
              </div>
              <footer class="Testimonial-author">
                <cite class="Testimonial-name u-typo-headline5">{{ item.name|german_quotes }}</cite>
              </footer>
              <p class="Testimonial-quote u-typo-copy">{{ item.quote|german_quotes }}</p>
              <div class="Testimonial-line"></div>
            </blockquote>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="Testimonial-arrows js-Testimonial-arrows" aria-hidden="true">
      <button tabindex="-1" class="Testimonial-arrow js-Testimonial-arrow Testimonial-arrow--prev js-Testimonial-arrow--prev" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow-left"} only %}
      </button>
      <button tabindex="-1" class="Testimonial-arrow js-Testimonial-arrow Testimonial-arrow--next js-Testimonial-arrow--next" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow"} only %}
      </button>
    </div>
  </div>
  {% if button and button.url and button.label %}
    <div class="Testimonial-button u-container">
      {% include "@elements/button/button.html.twig" with {
        label: button.label,
        url: button.url
      } only %}
    </div>
  {% endif %}
  <div id="{{ id }}" class="u-hiddenVisually">Ende der Testimonials</div>
</section>