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

Open in your IDE?
  1. <section class="slice slice--bullet-points slice--padding bg-violet py-12 lg:py-20">
  2.     <div class="fluid-grid">
  3.         <div class="row">
  4.             <div class="col-12 lg-col-5 lg-col-offset-1 relative">
  5.                 <h2 class="title title--L relative font-weight-semibold text-white">
  6.                     {% if slice.title is defined and slice.title is not null %}
  7.                         {{ slice.title }}
  8.                     {% endif %}
  9.                 </h2>
  10.                 <div class="description relative paragraph paragraph--L font-weight-semibold mt-6 lg:mt-8 wysiwyg wysiwyg--dark text-white">
  11.                     {% if slice.text is defined and slice.text is not null %}
  12.                         {{ slice.text|raw }}
  13.                     {% endif %}
  14.                 </div>
  15.                 {% if slice.image.singleMedia is defined and slice.image.singleMedia.publicId is not null %}
  16.                     <picture>
  17.                         <source media="(max-width: 420px)"
  18.                                 data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_356,h_356') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_356,h_356,dpr_2') }} 2x">
  19.                         <source media="(min-width: 421px)"
  20.                                 data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_380,h_380') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_380,h_380,dpr_2') }} 2x">
  21.                         <img class="visual relative z-1 w-full mt-6 lg:mt-12 round lazyload" width="380" height="380"
  22.                              data-src="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,q_auto,c_fill,w_380,h_380') }}"
  23.                              alt="{{ slice.image.singleMedia.alt }}">
  24.                     </picture>
  25.                 {% endif %}
  26.             </div>
  27.             <div class="col-12 lg-col-5 lg-col-offset-7">
  28.                 <ul class="list-none mt-13 lg:mt-0">
  29.                     {% if slice.bulletPoints is defined and slice.bulletPoints is not empty %}
  30.                         {% for bulletPoint in slice.bulletPoints %}
  31.                             <li class="bullet-point {% if loop.index > 1 %}mt-12 lg:mt-18{% endif %}">
  32.                                 <h3 class="title title--M relative text-green z-1">
  33.                                     {% if bulletPoint.title is defined and bulletPoint.title is not null %}
  34.                                         {{ bulletPoint.title }}
  35.                                     {% endif %}</h3>
  36.                                 <div class="relative z-1 paragraph wysiwyg wysiwyg--dark text-white mt-4">
  37.                                     {% if bulletPoint.description is defined and bulletPoint.description is not null %}
  38.                                         {{ bulletPoint.description|raw }}
  39.                                     {% endif %}
  40.                                 </div>
  41.                             </li>
  42.                         {% endfor %}
  43.                     {% endif %}
  44.                 </ul>
  46.             </div>
  47.         </div>
  48.     </div>
  49. </section>