templates/includes/blocks/text-image-teaser.html.twig line 1

  1. <div class="text-image-teaser {% if content.inverted %} text-image-teaser--inverted {% endif %} {% if content.reverse %}
  2.             text-image-teaser--reverse {% endif %} {{ content.top }} {{ content.bottom }}" x-data="textimageteaser">
  3.     <div class="text-image-teaser__container">
  4.         {% if content.image %}
  5.             <div class="text-image-teaser__media">
  6.                 <img class="text-image-teaser__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  7.                      srcset ="{{ content.image|thumbnailUrl('320x') }} 320w, {{ content.image|thumbnailUrl('640x') }} 640w, {{ content.image|thumbnailUrl('720x') }} 720w, {{ content.image|thumbnailUrl('1280x') }} 1280w, {{ content.image|thumbnailUrl('1440x') }} 1440w, {{ content.image|thumbnailUrl('2048x') }} 2048w"
  8.                      alt="{{ content.textImageTeaserImageALT|default(content.image.description|striptags) }}" x-ref="image"
  9.                      sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  10.             </div>
  11.         {% endif %}
  12.         <div class="text-image-teaser__title" x-ref="title">
  13.             {% if content.textImageTeaserPagina %}
  14.             {% if content.textImageTeaserSeoHeadlinePagina %}<{{ content.textImageTeaserSeoHeadlinePagina }}>{% endif %}
  15.                 <div class="pagina">
  16.                     {{ content.textImageTeaserPagina }}
  17.                 </div>
  18.             {% if content.textImageTeaserSeoHeadlinePagina %}</{{ content.textImageTeaserSeoHeadlinePagina }}>{% endif %}
  19.             {% endif %}
  20.             {% if content.textImgTeaserTitleDesktop %}
  21.                 <div {% if content.textImgTeaserTitleMobile %}class="desktop-only" {% endif %}>
  22.                     {{ content.textImgTeaserTitleDesktop|raw }}
  23.                 </div>
  24.             {% endif %}
  25.         </div>
  26.         {% if content.textImgTeaserTitleMobile %}
  27.             <div class="text-image-teaser__title mobile-only" x-ref="mobiletitle">
  28.                 {{ content.textImgTeaserTitleMobile|raw }}
  29.             </div>
  30.         {% endif %}
  31.         <div class="text-image-teaser__content" x-ref="content">
  32.             {% if content.text %}
  33.                 {{ content.text|raw }}
  34.             {% endif %}
  35.         </div>
  36.         {% if content.textImageTeaserActionLink != null %}
  37.             <div class="text-image-teaser__actions" x-ref="actions">
  38.                 {% if content.textImageTeaserButtonType == 'box' %}
  39.                     <a href="{{ content.textImageTeaserActionLink }}"
  40.                        class="button button--{{ content.textImageTeaserButtonColor }}
  41.                               button--size-{{ content.textImageTeaserButtonSize }}">
  42.                         <span class="button__inner">
  43.                             {{ content.textImageTeaserButtonLabel }}
  44.                         </span>
  45.                     </a>
  46.                 {% elseif content.textImageTeaserButtonType == 'text' %}
  47.                     <a href="{{ content.textImageTeaserActionLink }}"
  48.                        class="text-button text-button--{{ content.textImageTeaserTextButtonColor }}
  49.                                  {% if content.uppercase %} uppercase {% endif %}">
  50.                         {{ content.textImageTeaserButtonLabel }}
  51.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  52.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  53.                                   stroke-linecap="round" stroke-linejoin="round"/>
  54.                         </svg>
  55.                     </a>
  56.                 {% endif %}
  57.             </div>
  58.         {% endif %}
  59.     </div>
  60. </div>