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

Open in your IDE?
  1. <section class="slice slice--square-image pt-8 md:pt-16">
  2.     <div class="bg-violet-dark">
  3.         <div class="fluid-grid">
  4.             <div class="row">
  5.                 <div class="col-12 md-col-5 relative">
  6.                     <div class="visual-wrapper">
  7.                         <picture>
  8.                             <source media="(max-width: 420px)"
  9.                                     data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_388,h_388') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_388,h_388,dpr_2') }} 2x">
  10.                             <source media="(max-width: 767px)"
  11.                                     data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_735,h_735') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_737,h_737,dpr_2') }} 2x">
  12.                             <source media="(max-width: 1023px)"
  13.                                     data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_418,h_418') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_418,h_418,dpr_2') }} 2x">
  14.                             <source media="(max-width: 1279px)"
  15.                                     data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_520,h_520') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_520,h_520,dpr_2') }} 2x">
  16.                             <source media="(min-width: 1280px)"
  17.                                     data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_668,h_668') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_668,h_668,dpr_2') }} 2x">
  18.                             <img class="w-full lazyload"
  19.                                     height="594"
  20.                                     width="594"
  21.                                     data-src="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,q_auto,c_fill,w_594,h_594') }}"
  22.                                     alt="{{ slice.image.singleMedia.alt }}">
  23.                         </picture>
  24.                     </div>
  25.                 </div>
  26.                 <div class="col-12 md-col-7 lg-col-5 lg-col-offset-6 pb-10 md:py-16">
  27.                     <h2 class="title title--L relative font-weight-semibold text-orange">
  28.                         {% if slice.title is defined and slice.title is not null %}
  29.                             {{ slice.title }}
  30.                         {% endif %}
  31.                     </h2>
  33.                     <div class="description relative paragraph mt-8 wysiwyg wysiwyg--dark text-white">
  34.                         {% if slice.text is defined and slice.text is not null %}
  35.                             {{ slice.text|raw }}
  36.                         {% endif %}
  37.                     </div>
  39.                     {% if slice.cta.label is defined and slice.cta.label is not null %}
  40.                         {% set cta = slice.cta %}
  41.                         {% include 'front/partials/button-arrow.html.twig' with {class: 'mt-6 button--orange'} %}
  42.                     {% endif %}
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </div>
  47. </section>