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

Open in your IDE?
  1. <section class="slice missions">
  2.     <div class="fluid-grid">
  3.         <div class="row items-start">
  4.             <div class="col-12 lg-col-5 xl-col-6">
  5.                 <div class="missions__pic-wrap">
  6.                     {% for point in slice.points %}
  7.                         <picture>
  8.                             <source media="(max-width:767px)"
  9.                                     data-srcset="{{ cloudinary_media(point.image.singleMedia, 'f_auto,c_fill,q_auto,w_460,h_460') }}">
  10.                             <source media="(max-width:1023px)"
  11.                                     data-srcset="{{ cloudinary_media(point.image.singleMedia, 'f_auto,c_fill,q_auto,w_600,h_600') }}">
  12.                             <source media="(max-width:1279px)"
  13.                                     data-srcset="{{ cloudinary_media(point.image.singleMedia, 'f_auto,c_fill,q_auto,w_635,h_635') }}">
  14.                             <img js-toggle-image data-pos="{{ loop.index }}" width="860" height="860"
  15.                                  class="lazyload w-full {% if loop.first %}is-active{% endif %}"
  16.                                  data-src="{{ cloudinary_media(point.image.singleMedia, 'f_auto,c_fill,q_auto,w_860,h_860') }}"
  17.                                  alt="{{ point.image.singleMedia.alt }}">
  18.                         </picture>
  19.                     {% endfor %}
  20.                 </div>
  21.             </div>
  23.             <div class="col-12 lg-col-7 xl-col-6 pt-10 lg:pt-7">
  24.                 <h2 class="title--XS uppercase font-extrabold text-violet mb-6 md:mb-8">{{ slice.surTitle }}</h2>
  26.                 {# accordion with points #}
  27.                 <ul>
  28.                     {% for point in slice.points %}
  29.                         <li class="mb-5 md:mb-7" js-toggle-content="{connected: true, image: true}">
  30.                             {# attention data-pos = loop index when dynamization #}
  31.                             {# set is-active class on button tag on first item of loop ! #}
  32.                             <button class="missions__title {% if loop.first %}is-active{% endif %}"
  33.                                     js-toggle-content-button data-pos="{{ loop.index }}">
  34.                                 <h3>
  35.                                     <span class="missions__title-point">{{ loop.index }}</span>
  36.                                     {{ point.title }}
  37.                                 </h3>
  38.                             </button>
  39.                             <div class="accordion__content {% if loop.first %}is-visible{% endif %}"
  40.                                  js-toggle-content-content>
  41.                                 <div js-toggle-content-inner class="pt-3 md:pt-8 missions__desc">
  42.                                     {{ point.description|raw }}
  43.                                 </div>
  44.                             </div>
  45.                         </li>
  46.                     {% endfor %}
  47.                 </ul>
  49.                 {# know more block #}
  50.                 {% if  slice.links|length > 0 %}
  51.                 <div class="missions__more">
  52.                     <p class="uppercase text-base font-extrabold mb-3">En savoir plus sur :</p>
  54.                     <ul>
  55.                         {% for link in slice.links %}
  56.                             <li class="missions__more-item">
  57.                                 <a href="{{ page_url(link.page, "front") }}"
  58.                                    class="cta-arrow cta-arrow--circle-violet text-violet">
  59.                                     {{ link.label }}
  60.                                     <span class="cta-arrow__circle">
  61.                                     <svg width="8" height="8" class="icon--white">
  62.                                         <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  63.                                     </svg>
  64.                                 </span>
  65.                                 </a>
  66.                             </li>
  67.                         {% endfor %}
  68.                     </ul>
  69.                 </div>
  70.                 {% endif %}
  71.             </div> 
  72.         </div>
  73.     </div>
  74. </section>