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

Open in your IDE?
  1. <section class="slice slice--push-expertises">
  2.     <div class="fluid-grid">
  3.         <h2 class="title--L text-violet title--br font-weight-semibold">Ces expertises peuvent<br/> aussi vous intéresser</h2>
  4.         <div class="row">
  5.             <div class="col-12 relative flex flex-col" js-slider="{options: { slidesPerView: 1.35, spaceBetween: 24, breakpoints: {768: { slidesPerView: 2.5, spaceBetween: 24 }, 1024: { slidesPerView: 3, spaceBetween: 32 }} }}">
  6.                 {% include 'front/partials/slider-nav.html.twig' with {mainClass: 'swiper-navigation relative md:absolute md:top-0 md:right-0 md:-translate-y-12 z-1 flex justify-between items-center mt-6 md:mt-0 order-2 md:order-1', iconColor: 'violet', buttonFirst: 'mr-8'} %}
  7.                 
  8.                 <div class="swiper-container relative lg:overflow-hidden w-full mt-4 md:mt-8  order-1 lg:order-2" js-slider-el>
  9.                     <div class="swiper-wrapper">
  10.                         {% for expertise in slice.expertises %}
  11.                             {% set expertiseProperties = expertise.contentProperties %}
  12.                             <div class="swiper-slide">
  13.                                 <a href="{{ page_url(expertise, 'front') }}" class="card card-expertise relative block bg-violet overflow-hidden">
  14.                                     <div class="suptitle absolute text-orange font-weight-xbold uppercase z-0">Expertise</div>
  15.                                     <div class="visual__wrapper absolute top-0 right-0">
  16.                                         <picture>
  17.                                             <source media="(max-width: 420px)"
  18.                                                 data-srcset="{{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_129,h_189') }} 1x, {{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_129,h_189,dpr_2') }} 2x">
  19.                                             <source media="(max-width: 767px)"
  20.                                                 data-srcset="{{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_288,h_412') }} 1x, {{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_288,h_412,dpr_2') }} 2x">
  21.                                             <source media="(max-width: 1279px)"
  22.                                                 data-srcset="{{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_218,h_320') }} 1x, {{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_218,h_320,dpr_2') }} 2x">
  23.                                             <source media="(min-width: 1280px)"
  24.                                                 data-srcset="{{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_245,h_360') }} 1x, {{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_245,h_360,dpr_2') }} 2x">
  25.                                             <img width="245" height="360" data-src="{{ cloudinary_media(expertiseProperties.image.singleMedia, 'f_auto,c_fill,q_auto,w_245,h_360') }}" class="pic relative w-full lazyload" alt="{{ expertiseProperties.image.singleMedia.alt }}" />
  26.                                         </picture>
  27.                                         <img width="226" height="319" data-src="/assets/front/card-expertise-cache.svg" alt="" aria-hidden="true" class="lazyload cache absolute top-0 left-0">
  28.                                     </div>
  29.                                     <div class="content absolute">
  30.                                         <div class="title text-white font-weight-semibold">{{ expertise.title }}</div>
  31.                                         <span class="cta-arrow cta-arrow--circle-orange text-white mt-4 lg:mt-6">
  32.                                             En savoir plus
  33.                                             <span class="cta-arrow__circle">
  34.                                                 <svg width="8" height="8" class="icon--white">
  35.                                                     <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  36.                                                 </svg>
  37.                                             </span>
  38.                                         </span>  
  39.                                     </div>
  40.                                 </a>
  41.                             </div>
  42.                         {% endfor %}
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </section>