templates/includes/blocks/hero.html.twig line 1

  1. {% if content.heroImageWidth == "" %}
  2.     {% set heroImageWidth = "50" %}
  3. {% else %}
  4.     {% set heroImageWidth = content.heroImageWidth %}
  5. {% endif %}
  6. {% if content.heroTextWidth == "" %}
  7.     {% set heroTextWidth = "50" %}
  8. {% else %}
  9.     {% set heroTextWidth = content.heroTextWidth %}
  10. {% endif %}
  11. {% if content.heroVerticalOffset == "" %}
  12.     {% set heroVerticalOffset = "0" %}
  13. {% else %}
  14.     {% set heroVerticalOffset = content.heroVerticalOffset %}
  15. {% endif %}
  16. <div class="hero pt-hero-small {% if content.inverted %} hero--inverted {% endif %}" x-data="hero"
  17.      style="--hero-text-width: {{ heroTextWidth }}%; --hero-image-width: {{ heroImageWidth }}%; --hero-image-offset: -{{ content.heroImageOffset }}%; --hero-image-vertical-anchor:  {{ content.heroImageVerticalAnchor }}; --hero-image-vertical-offset: {{ heroVerticalOffset }}%  ">
  18.     <div class="hero__container">
  19.         <div class="hero__title" x-ref="title">
  20.             {% if content.heroPagina %}
  21.             {% if content.heroSeoHeadlinePagina %}<{{ content.heroSeoHeadlinePagina }}>{% endif %}
  22.                 <div {% if content.inverted %} style="color: #fff;" {% endif %} class="pagina">
  23.                     {{ content.heroPagina }}
  24.                 </div>
  25.             {% if content.heroSeoHeadlinePagina %}</{{ content.heroSeoHeadlinePagina }}>{% endif %}
  26.             {% endif %}
  27.             <{{ content.heroSeoHeadlineTitle ? content.heroSeoHeadlineTitle : 'h1' }} {% if content.heroTitleMobile %}class="desktop-only" {% endif %}>
  28.                 {{ content.title|raw }}
  29.             </{{ content.heroSeoHeadlineTitle ? content.heroSeoHeadlineTitle : 'h1' }}>
  30.         </div>
  31.         {% if content.heroTitleMobile %}
  32.             <{{ content.heroSeoHeadlineTitle ? content.heroSeoHeadlineTitle : 'h1' }} class="hero__title mobile-only" x-ref="mobiletitle">
  33.                 {{ content.heroTitleMobile|raw }}
  34.             </{{ content.heroSeoHeadlineTitle ? content.heroSeoHeadlineTitle : 'h1' }}>
  35.         {% endif %}
  36.         <{{ content.heroSeoHeadlineText ? content.heroSeoHeadlineText : 'div' }} class="hero__text" x-ref="text">
  37.             {{ content.text|raw }}
  38.         </{{ content.heroSeoHeadlineText ? content.heroSeoHeadlineText : 'div' }}>
  39.         {% if content.heroActionLink != null %}
  40.             <div class="hero__actions" x-ref="actions">
  41.                 {% if content.heroButtonType == 'box' %}
  42.                     <a href="{{ content.heroActionLink }}"
  43.                        class="button button--{{ content.heroButtonColor }} button--size-{{ content.heroButtonSize }}">
  44.                         <span class="button__inner">
  45.                             {{ content.heroButtonLabel }}
  46.                         </span>
  47.                     </a>
  48.                 {% elseif content.heroButtonType == 'text' %}
  49.                     <a href="{{ content.heroActionLink }}"
  50.                        class="text-button text-button--{{ content.heroTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  51.                         {{ content.heroButtonLabel }}
  52.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  53.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  54.                                   stroke-linecap="round" stroke-linejoin="round"/>
  55.                         </svg>
  56.                     </a>
  57.                 {% endif %}
  58.             </div>
  59.         {% endif %}
  60.         {% if content.image %}
  61.             <div class="hero__media">
  62.                 <img class="hero__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  63.                      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"
  64.                      alt="{{ content.heroImageALT|default(content.image.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  65.             </div>
  66.         {% endif %}
  67.         <div class="hero__arrow" x-ref="arrow">
  68.             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 25">
  69.                 <path fill-rule="evenodd" clip-rule="evenodd" d="M25 25L50 0H25v25z" fill="#00F"/>
  70.                 <path fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0l25 25V0z" fill="#FF73F5"/>
  71.             </svg>
  72.         </div>
  73.     </div>
  74. </div>