Stylebook

id: w-s-19

Naši panteři

Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.

        {% include "@Components/sections/testimonials-section/testimonials-section.twig" with {props: {
  header: {
    heading: {
      title: "Naši panteři"
    },
    perex: "Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.",
  },
  group: {
    items: testimonial_sample[:12],
  },
}} %}

          

<section class="base-section  s-testimonials">
  <div class="base-section__container container">
    
          <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Naši panteři
      </h2>
  
      <div class="base-header__description entry-content mb-0">Hlasu zkrátka nevratné duší indičtí půlkilometrová začali nutné už od středisko. Společných snažila líně budoucnost začne vloženy stal objevováním, umělé cílem starým dne větvičky názvy moři zabíjí.</div>
  
  
  

</header>
    
            <div class="g-testimonials d-flex gap-6 align-items-center flex-wrap justify-content-between">
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/pilulka.svg" alt="Arrange" width="100" height="26" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <span class="i-testimonial d-flex align-items-center justify-content-center">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/dobrovsky.svg" alt="Arrange" width="114" height="26" loading="lazy" draggable="false">
  </picture>
</div>
  </span>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/rohlik.svg" alt="Arrange" width="90" height="46" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <span class="i-testimonial d-flex align-items-center justify-content-center">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/astratex.svg" alt="Arrange" width="105" height="16" loading="lazy" draggable="false">
  </picture>
</div>
  </span>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/alkohol-cz.svg" alt="Arrange" width="129" height="30" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/cerstve-utrzeno.svg" alt="Arrange" width="73" height="72" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/vivantis.svg" alt="Arrange" width="91" height="20" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/dr-oetker.svg" alt="Arrange" width="86" height="56" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/harfasport.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
          

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/represent.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
      </div>
    
    </div>
</section>

Preview

Twig

Html

        {% include "@Components/sections/testimonials-section/testimonials-section.twig" with {props: {
  group: {
    items: testimonial_sample,
    variant: "infinite",
  },
}} %}

          

<section class="base-section  s-testimonials">
  <div class="base-section__container container">
    
    
          <div class="g-testimonials --infinite">

  <div class="g-testimonials__wrapper overflow-hidden">
      <div class="g-testimonials__inner d-grid d-sm-flex gap-sm-5 flex-sm-nowrap">
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/pilulka.svg" alt="Arrange" width="100" height="26" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <span class="i-testimonial d-flex align-items-center justify-content-center">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/dobrovsky.svg" alt="Arrange" width="114" height="26" loading="lazy" draggable="false">
  </picture>
</div>
  </span>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/rohlik.svg" alt="Arrange" width="90" height="46" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <span class="i-testimonial d-flex align-items-center justify-content-center">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/astratex.svg" alt="Arrange" width="105" height="16" loading="lazy" draggable="false">
  </picture>
</div>
  </span>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/alkohol-cz.svg" alt="Arrange" width="129" height="30" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/cerstve-utrzeno.svg" alt="Arrange" width="73" height="72" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/vivantis.svg" alt="Arrange" width="91" height="20" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/dr-oetker.svg" alt="Arrange" width="86" height="56" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/harfasport.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                  

  <a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
    <div class="img u-posr overflow-hidden    i-testimonial__image" tabindex="-1">
  <picture>
    
    <img src="images/clients/represent.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
              </div>
  </div>

</div>
    
    </div>
</section>