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

  1. <div class="sticky-teaser {% if content.inverted %}sticky-teaser--inverted {% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="stickyteaser">
  3.     <div class="sticky-teaser__container">
  4.         <div class="sticky-teaser__title" x-ref="title">
  5.             {% if content.stickyTeaserPagina %}
  6.             {% if content.stickyTeaserSeoHeadlinePagina %}<{{ content.stickyTeaserSeoHeadlinePagina }}>{% endif %}
  7.                 <div class="pagina">
  8.                     {{ content.stickyTeaserPagina }}
  9.                 </div>
  10.             {% if content.stickyTeaserSeoHeadlinePagina %}</{{ content.stickyTeaserSeoHeadlinePagina }}>{% endif %}
  11.             {% endif %}
  12.             <div {% if content.stickyTeaserTitleMobile %} class="desktop-only" {% endif %}>
  13.                 {{ content.stickyTeaserTitleDesktop|raw }}
  14.             </div>
  15.         </div>
  16.         {% if content.stickyTeaserTitleMobile %}
  17.             <div class="sticky-teaser__title mobile-only" x-ref="mobiletitle">
  18.                 {{ content.stickyTeaserTitleMobile|raw }}
  19.             </div>
  20.         {% endif %}
  21.         {% if content.lead %}
  22.             <div class="sticky-teaser__lead" x-ref="lead">
  23.                 {{ content.lead|raw }}
  24.             </div>
  25.         {% endif %}
  26.         {% if content.stickyTeaserActionLink != null %}
  27.             <div class="sticky-teaser__actions" x-ref="actions">
  28.                 {% if content.stickyTeaserButtonType == 'box' %}
  29.                     <a href="{{ content.stickyTeaserActionLink }}"
  30.                        class="button button--{{ content.stickyTeaserButtonColor }}
  31.                               button--size-{{ content.stickyTeaserButtonSize }}">
  32.                         <span class="button__inner">
  33.                             {{ content.stickyTeaserButtonLabel }}
  34.                         </span>
  35.                     </a>
  36.                 {% elseif content.stickyTeaserButtonType == 'text' %}
  37.                     <a href="{{ content.stickyTeaserActionLink }}"
  38.                        class="text-button text-button--{{ content.stickyTeaserTextButtonColor }}
  39.                                  {% if content.uppercase %} uppercase {% endif %}">
  40.                         {{ content.stickyTeaserButtonLabel }}
  41.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  42.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  43.                                   stroke-linecap="round" stroke-linejoin="round"/>
  44.                         </svg>
  45.                     </a>
  46.                 {% endif %}
  47.             </div>
  48.         {% endif %}
  49.         <div class="sticky-teaser__main">
  50.             <div class="sticky-teaser__aside">
  51.                 <div class="sticky-teaser__media" x-ref="animation" data-path="/assets/animation.json"></div>
  52.             </div>
  53.             <div class="sticky-teaser__content" x-ref="content">
  54.                 <div class="swiper-container" x-ref="swiper">
  55.                     <div class="swiper-wrapper">
  56.                         {% for card in content.subblocks %}
  57.                             {{ include('/includes/blocks/sticky-teaser-card.html.twig') }}
  58.                         {% endfor %}
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     </div>
  64. </div>