templates/front/slices/slice_key_figures.html.twig line 1

Open in your IDE?
  1. <section class="slice slice--key-figures">
  2.     <div class="fluid-grid">
  3.         <div class="row">
  4.             <div class="col-12 lg-col-1 lg:flex justify-center relative">
  5.                 <p class="title--XS text-grey-lighter font-weight-xbold uppercase lg:absolute">
  6.                     Points-clés
  7.                 </p>
  8.             </div>
  9.             <div class="col-12 lg-col-5 lg-col-offset-1 mt-4 lg:mt-0">
  10.                 <h2 class="title--L text-violet font-weight-light">{{ slice.title|highlight_word|raw }}</h2>
  11.             </div>
  13.             {% if slice.text is defined and slice.text is not null %}
  14.             <div class="col-12 lg-col-4 lg-col-offset-7 mt-6 lg:mt-0">
  15.                 <div class="paragraph text-grey-dark">{{ slice.text|raw }}</div>
  16.             </div>
  17.             {% endif %}
  18.         </div>
  19.         <div class="row" js-slider="{options: { slidesPerView: 1.5, spaceBetween: 24, breakpoints: { 768: { slidesPerView: 3, spaceBetween: 24 }, 1024: { slidesPerView: 3, spaceBetween: 84 }} }}">
  20.             <div class="col-12 lg-col-10 lg-col-offset-1 mt-8 lg:mt-22">
  21.                 <div class="swiper-container overflow-hidden w-full" js-slider-el>
  22.                     <div class="swiper-wrapper">
  23.                         {% for keyFigure in slice.keyFigures %}
  24.                             <div class="swiper-slide flex flex-col lg:flex-row justify-between">
  25.                                 <div class="key-figure relative w-full">
  26.                                     <div class="key-figure__content abs-center text-center w-full">
  27.                                         <div class="key-figure__number text-white font-weight-bold w-full">{{keyFigure.number}}</div>
  28.                                         <div class="key-figure__description text-white w-full mt-2">{{keyFigure.description|raw}}</div>
  29.                                     </div>
  30.                                 </div>
  31.                             </div>
  32.                         {% endfor %}
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.             <div class="col-12 lg-col-1 lg-col-offset-11">
  37.                 {% include 'front/partials/slider-nav.html.twig' with {mainClass: 'swiper-navigation relative lg:h-full flex lg:flex-col justify-between lg:justify-center lg:items-end mt-4 lg:mt-0', iconColor: 'violet', buttonFirst: 'lg:mb-6'} %}
  38.             </div>
  39.         </div>
  40.     </div>
  41. </section>