templates/includes/blocks/steps.html.twig line 1

Open in your IDE?
  1. <section class="section-steps gradient-main">
  2.     <div class="flex flex-col px-4 py-15 gap-10 md:px-10 lg:max-w-wrapper-834 lg:px-0 lg:mx-auto xl:max-w-wrapper-1000">
  3.                 
  4.                 <h3 class="text-24 leading-32 text-white font-bold text-center md:text-32 md:leading-40 md:mb-0">
  5.                     {{ content.stepsTitle | raw }}
  6.                 </h3> 
  7.                 
  8.                 <div class="flex flex-col gap-5 md:py-5 md:flex-row md:gap-6 xl:pt-0">
  9.                     <div class="flex flex-col px-5 py-8 gap-4 bg-#F3F9FF rounded-10px md:w-1/3">
  10.                         <div class="flex gap-3 items-start justify-center">
  11.                             <span class="text-24 leading-140p font-semibold flex items-center justify-center w-9 h-9 bg-orange-400 text-white rounded-full">1</span> 
  12.                             {% if content.step1Icon %}
  13.                                 <img src="{{ content.step1Icon.thumbnails['200x'] }}" alt="{{ content.step1Icon.description }}">
  14.                             {% endif %}
  15.                         </div> 
  16.                         <p class="text-base leading-24 text-black text-center md:text-18">
  17.                             {% if content.step1Text %}
  18.                                 {{ content.step1Text | raw }}
  19.                             {% endif %}
  20.                         </p>
  21.                     </div> 
  22.                     <div class="flex flex-col px-5 py-8 gap-4 bg-#F3F9FF rounded-10px md:w-1/3">
  23.                         <div class="flex gap-3 items-start justify-center">
  24.                             <span class="text-24 leading-140p font-semibold flex items-center justify-center w-9 h-9 bg-orange-400 text-white rounded-full">2</span> 
  25.                             {% if content.step2Icon %}
  26.                                 <img src="{{ content.step2Icon.thumbnails['200x'] }}" alt="{{ content.step2Icon.description }}">
  27.                             {% endif %}
  28.                         </div> 
  29.                         <p class="text-base leading-24 text-black text-center md:text-18">
  30.                             {% if content.step2Text %}
  31.                                 {{ content.step2Text | raw }}
  32.                             {% endif %}
  33.                         </p>
  34.                     </div> 
  35.                     <div class="flex flex-col px-5 py-8 gap-4 bg-#F3F9FF rounded-10px md:w-1/3">
  36.                         <div class="flex gap-3 items-start justify-center">
  37.                             <span class="text-24 leading-140p font-semibold flex items-center justify-center w-9 h-9 bg-orange-400 text-white rounded-full">3</span> 
  38.                             {% if content.step3Icon %}
  39.                                 <img src="{{ content.step3Icon.thumbnails['200x'] }}" alt="{{ content.step3Icon.description }}">
  40.                             {% endif %}
  41.                         </div> 
  42.                         <p class="text-base leading-24 text-black text-center md:text-18">
  43.                             {% if content.step3Text %}
  44.                                 {{ content.step3Text | raw }}
  45.                             {% endif %}
  46.                         </p>
  47.                     </div>
  48.                 </div> 
  50.         {% if content.buttonUrl and content.buttonText %}     
  51.             <a href="{{ content.buttonUrl }}" class="sls__button--quote mx-auto">{{ content.buttonText }}</a>
  52.         {% endif %}
  53.     </div>
  54. </section>