templates/elements/service_list.html.twig line 1

Open in your IDE?
  1. <section id="{{ service.title|replace({" ": "_"}) }}" class="services__service
  2. {% if loop.index % 2 != 0 and background =='background-white' %}background-gray
  3. {% elseif loop.index % 2 == 0 and background =='background-gray' %}background-gray{% endif %}"
  4. data-brand-header>
  5.     <div class="grid-container">
  6.         <div class="grid-x grid-margin-x align-middle">
  7.           <div
  8.               class="cell medium-offset-3 large-offset-1 medium-6 large-5 small-order-1 {% if loop.index % 2 == 0 %}large-order-2{% endif %}">
  9.             <div class="services__service-image" data-css-animation="image">
  10.               <!-- recommended size: default - 568x456, retina @2x - 1216x912 -->
  11.               <img data-src="{{ asset(service.image.thumbnails['568x456']) }}" data-srcset="{{ asset(service.image.thumbnails['1216x912']) }} 2x" alt data-lazy-image>
  12.             </div>
  13.           </div>
  14.           <div
  15.               class="cell medium-offset-1 medium-10 large-4 small-order-2 {% if loop.index % 2 == 0 %}large-order-1{% endif %}">
  16.             <div class="title out" data-css-animation="out-in" style="--delay: .2s">
  17.               <div class="in">
  18.                 <h4>{{ service.title }}</h4>
  19.               </div>
  20.             </div>
  21.             <div class="editable indent-m" data-css-animation="text"
  22.                  style="--delay: .4s"><p>{{ service.content|raw }}</p></div>
  23.             <div data-css-animation="fade-in-up" style="--delay: .6s">
  24.               <a href="{{ service.url }}"
  25.                  class="button button__with-icon-right button__submit button__transparent button__no-margin">
  26.                 <span>{{ 'Lire plus'|trans }}</span>
  27.                 <svg class="icon" width="32" height="32" viewBox="0 0 46 48">
  28.                   <use xlink:href='#arrow-right'/>
  29.                 </svg>
  30.               </a>
  31.             </div>
  32.           </div>
  33.         </div>
  34.     </div>
  35. </section>