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

  1. <div class="big-teaser {% if content.reverse %} big-teaser--reverse {% endif %} {% if content.inverted %} big-teaser--inverted {% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="bigteaser">
  3.     <div class="big-teaser__container">
  4.         <div class="big-teaser__title" x-ref="title">
  5.             {% if content.bigTeaserSeoHeadlinePagina %}<{{ content.bigTeaserSeoHeadlinePagina }}>{% endif %}
  6.             <div class="pagina">
  7.                 {% if content.bigTeaserPagina %}
  8.                     {{ content.bigTeaserPagina }}
  9.                 {% endif %}
  10.             </div>
  11.             {% if content.bigTeaserSeoHeadlinePagina %}</{{ content.bigTeaserSeoHeadlinePagina }}>{% endif %}
  12.             <div{% if content.bigTeaserTitleMobile %} class="desktop-only"{% endif %}>
  13.                 {{ content.title|raw }}
  14.             </div>
  15.             {% if content.bigTeaserTitleMobile %}
  16.             <div class="mobile-only">
  17.                 {{ content.bigTeaserTitleMobile|raw }}
  18.             </div>
  19.             {% endif %}
  20.         </div>
  21.         {% if content.image %}
  22.             <div class="big-teaser__media">
  23.                 <img src="{{  content.image|thumbnailUrl('2880x') }}"
  24.                      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"
  25.                      alt="{{ content.bigTeaserImageALT|default(content.image.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 720px, (min-width: 768px) 35vw, 100vw">
  26.             </div>
  27.         {% endif %}
  28.         {% if content.lead %}
  29.             <div class="big-teaser__lead" x-ref="lead">
  30.                 {{ content.lead|raw }}
  31.             </div>
  32.         {% endif %}
  33.         {% if content.text %}
  34.             <div class="big-teaser__content" x-ref="content">
  35.                 {{ content.text|raw }}
  36.             </div>
  37.         {% endif %}
  38.         <div class="big-teaser__actions" x-ref="actions">
  39.             {% if content.bigTeaserActionLink != null %}
  40.                 {% if content.bigTeaserButtonType == 'box' %}
  41.                     <a href="{{ content.bigTeaserActionLink }}"
  42.                        class="button button--{{ content.bigTeaserButtonColor }} button--size-{{ content.bigTeaserButtonSize }}">
  43.                         <span class="button__inner">
  44.                             {{ content.buttonLabel }}
  45.                         </span>
  46.                     </a>
  47.                 {% elseif content.bigTeaserButtonType == 'text' %}
  48.                     <a href="{{ content.bigTeaserActionLink }}"
  49.                        class="text-button text-button--{{ content.bigTeaserTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  50.                         {{ content.buttonLabel }}
  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.             {% endif %}
  58.         </div>
  59.     </div>
  60. </div>