templates/includes/blocks/sticky-sections.html.twig line 1

  1. <div class="sticky-sections {% if content.inverted %}sticky-sections--inverted {% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="stickysections">
  3.     <div class="sticky-sections__container">
  4.         <div class="sticky-sections__main">
  5.             <div class="sticky-sections__aside">
  6.                 <div class="sticky-sections__titles" x-ref="titles">
  7.                     {% for key, sectionCard in content.subblocks %}
  8.                         <div class="sticky-sections__title {% if sectionCard.stickySectionsTitleMobile %}desktop-only {% endif %}"
  9.                              @click="scrollTo({{ key }})">
  10.                             {{ sectionCard.title|raw }}
  11.                         </div>
  12.                     {% endfor %}
  13.                 </div>
  14.             </div>
  15.             <div class="sticky-sections__content" x-ref="content">
  16.                 {% for sectionCard in content.subblocks %}
  17.                     <div class="sticky-sections-card">
  18.                         {% if sectionCard.stickySectionsTitleMobile %}
  19.                             <div class="sticky-sections-card__title mobile-only">
  20.                                 {{ sectionCard.stickySectionsTitleMobile|raw }}
  21.                             </div>
  22.                         {% endif %}
  23.                         <div class="sticky-sections-card__media">
  24.                             {% if sectionCard.image %}
  25.                                 <img src ="{{ sectionCard.image|thumbnailUrl('2880x') }}"
  26.                                      srcset ="{{ sectionCard.image|thumbnailUrl('320x') }} 320w, {{ sectionCard.image|thumbnailUrl('640x') }} 640w, {{ sectionCard.image|thumbnailUrl('1280x') }} 1280w, {{ sectionCard.image|thumbnailUrl('1440x') }} 1440w, {{ sectionCard.image|thumbnailUrl('2048x') }} 2048w"
  27.                                      alt="{{ sectionCard.sectionCardImageALT|default(sectionCard.image.description|striptags)}}" sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw"
  28.                                      class="sticky-sections-card__image">
  29.                             {% endif %}
  30.                         </div>
  31.                         <div class="sticky-sections-card__text">
  32.                             {{ sectionCard.text|raw }}
  33.                         </div>
  34.                         <div class="sticky-sections-card__actions">
  35.                             {% for sectionCardAction in sectionCard.subblocks %}
  36.                                 {% if sectionCardAction.sectionCardActionLink != null %}
  37.                                     <a href="{{ sectionCardAction.sectionCardActionLink }}" class="sticky-sections-action">
  38.                                         {{ sectionCardAction.action }}
  39.                                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 13 26"
  40.                                              class="sticky-sections-action__arrow">
  41.                                             <path fill-rule="evenodd" clip-rule="evenodd"
  42.                                                   d="M13 13L0 0v13h13zM0 13v13l13-13H0z" fill="currentColor"/>
  43.                                         </svg>
  44.                                     </a>
  45.                                 {% endif %}
  46.                             {% endfor %}
  47.                         </div>
  48.                     </div>
  49.                 {% endfor %}
  50.                 {% if content.stickySectionsActionLink != null %}
  51.                     <div class="sticky-sections__actions">
  52.                         {% if content.stickySectionsButtonType == 'box' %}
  53.                             <a href="{{ content.stickySectionsActionLink }}"
  54.                                class="button button--{{ content.stickySectionsButtonColor }}
  55.                               button--size-{{ content.stickySectionsButtonSize }}">
  56.                                 <span class="button__inner">
  57.                                     {{ content.stickySectionsButtonLabel }}
  58.                                 </span>
  59.                             </a>
  60.                         {% elseif content.stickySectionsButtonType == 'text' %}
  61.                             <a href="{{ content.stickySectionsActionLink }}"
  62.                                class="text-button text-button--{{ content.stickySectionsTextButtonColor }}
  63.                                  {% if content.uppercase %} uppercase {% endif %}">
  64.                                 {{ content.stickySectionsButtonLabel }}
  65.                                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  66.                                     <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor"
  67.                                           stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
  68.                                 </svg>
  69.                             </a>
  70.                         {% endif %}
  71.                     </div>
  72.                 {% endif %}
  73.             </div>
  74.         </div>
  75.     </div>
  76. </div>