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

Open in your IDE?
  1. {% set sizesIcons = {
  2.     'icon-accord-bg-violet': [74,52],
  3.     'icon-accord-bg-orange': [74,52],
  4.     'icon-building-bg-orange': [49,50],
  5.     'icon-building-bg-violet': [49,50],
  6.     'icon-communication-bg-violet': [46,48],
  7.     'icon-communication-bg-orange': [46,48],
  8.     'icon-contact-bg-orange': [60,41],
  9.     'icon-contact-bg-violet': [60,41],
  10.     'icon-dossier-bg-violet': [52,50],
  11.     'icon-dossier-bg-orange': [52,50],
  12.     'icon-energy-bg-orange': [44,62],
  13.     'icon-energy-bg-violet': [44,62],
  14.     'icon-juridique-bg-violet': [81,62],
  15.     'icon-juridique-bg-orange': [81,62],
  16.     'icon-money-bg-orange': [55,55],
  17.     'icon-money-bg-violet': [55,55],
  18.     'icon-salaries-bg-violet': [52,63],
  19.     'icon-salaries-bg-orange': [52,63],
  20.     'icon-transport-bg-orange': [75,43],
  21.     'icon-transport-bg-violet': [75,43]
  22.  } %}
  24. <section class="slice slice--key-figures">
  25.     <div class="fluid-grid">
  26.         <div class="row">
  27.             <div class="col-12 lg-col-1 lg:flex justify-center relative">
  28.                 <h3 class="title--XS text-grey-lighter font-weight-xbold uppercase lg:absolute">
  29.                     Points-clés
  30.                 </h3>
  31.             </div>
  32.             <div class="col-12 lg-col-5 lg-col-offset-1 mt-4 lg:mt-0">
  33.                 <h2 class="title--L text-violet font-weight-light">{{ slice.title|highlight_word|raw }}</h2>
  34.             </div>
  36.             {% if slice.text is defined and slice.text is not null %}
  37.             <div class="col-12 lg-col-4 lg-col-offset-7 mt-6 lg:mt-0">
  38.                 <div class="paragraph text-grey-dark">{{ slice.text|raw }}</div>
  39.             </div>
  40.             {% endif %}
  41.         </div>
  42.         <div class="row"
  43.              js-slider="{options: { slidesPerView: 1.3, spaceBetween: 24, breakpoints: { 768: { slidesPerView: 3, spaceBetween: 12 }, 1024: { slidesPerView: 3, spaceBetween: 24 }, 1440: { slidesPerView: 3, spaceBetween: 84 }} }}">
  44.             <div class="col-12 lg-col-10 lg-col-offset-1 mt-8 lg:mt-22">
  45.                 <div class="swiper-container overflow-hidden w-full" js-slider-el>
  46.                     <div class="swiper-wrapper">
  47.                         {% for keyPoint in slice.keyPoints %}
  48.                             <div class="swiper-slide flex flex-col lg:flex-row justify-between">
  49.                                 <div class="key-figure relative w-full">
  50.                                     <div class="key-figure__content abs-center text-center w-full">
  51.                                         <div class="key-figure__icon">
  52.                                             <svg height="{{ sizesIcons[keyPoint.picto][1] }}" width="{{ sizesIcons[keyPoint.picto][0] }}" class="icon block mx-auto" aria-hidden="true">
  53.                                                 <use href="#{{ keyPoint.picto }}"
  54.                                                      xlink:href="#{{ keyPoint.picto }}"></use>
  55.                                             </svg>
  56.                                         </div>
  57.                                         <div class="key-figure__description text-white w-full mt-4">{{ keyPoint.description|raw }}</div>
  58.                                     </div>
  59.                                 </div>
  60.                             </div>
  61.                         {% endfor %}
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.             <div class="col-12 lg-col-1 lg-col-offset-11">
  66.                 {% 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'} %}
  67.             </div>
  68.         </div>
  69.     </div>
  70. </section>