templates/includes/blocks/case-study-hero.html.twig line 1

  1. {% if content.caseStudyHeroLinkedItem == 'caseStudyHeroModal' %}
  2. <div class="modal" :class="{'modal--show': show}" x-data="modal">
  3. {% endif %}
  4.     <div class="case-study-hero pt-hero {% if content.inverted %}case-study-hero--inverted {% endif %}"
  5.          x-data="casestudyhero">
  6.         <svg class="case-study-hero__background" preserveaspectratio="xMinYMin slice" fill="none"
  7.              xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 1045" x-ref="background">
  8.             <path d="M-337.621 116.309L1764 1329M1366.15-155L1764 1329M1366.14-155v1484M906.729-155l-.001 1484M1764-155.922L906.729 1329M-337.621 1057.67L1764-155M1366.15 1329L1764-155M1366.14 1329V-155M906.728 1329l.001-1484M1764 1329.9L906.729-155M1765.92 1057.84L-336.001-155M61.853 1329L-336.002-155M61.853 1329V-155M521.269 1329l.001-1484M-336.002 1329.9L521.27-155M1764.82 116.781L-336.001 1329M61.853-155l-397.855 1484M61.853-155v1484M521.27-155l-.001 1484M-336.002-155.922L521.269 1329"
  9.                   stroke="currentColor"/>
  10.         </svg>
  11.         <div class="case-study-hero__container">
  12.             <div class="case-study-hero__type" x-ref="type">
  13.                 {{ content.herotype }}
  14.             </div>
  15.             <div class="case-study-hero__title" x-ref="title">
  16.                 {% if content.csHeroPagina %}
  17.                 {% if content.caseStudyHeroSeoHeadlinePagina %}<{{ content.caseStudyHeroSeoHeadlinePagina }}>{% endif %}
  18.                     <div {% if content.inverted %} style="color: #fff;" {% endif %}
  19.                             class="pagina">
  20.                         {{ content.csHeroPagina }}
  21.                     </div>
  22.                 {% if content.caseStudyHeroSeoHeadlinePagina %}</{{ content.caseStudyHeroSeoHeadlinePagina }}>{% endif %}
  23.                 {% endif %}
  24.                 <{{ content.caseStudyHeroSeoHeadlineTitle ? content.caseStudyHeroSeoHeadlineTitle : 'h1' }} {% if content.csHeroTitleMobile %}class="desktop-only" {% endif %}>
  25.                     {{ content.herotitle|raw }}
  26.                 </{{ content.caseStudyHeroSeoHeadlineTitle ? content.caseStudyHeroSeoHeadlineTitle : 'h1' }}>
  27.             </div>
  28.             {% if content.csHeroTitleMobile %}
  29.                 <{{ content.caseStudyHeroSeoHeadlineTitle ? content.caseStudyHeroSeoHeadlineTitle : 'h1' }} class="case-study-hero__title mobile-only">
  30.                     {{ content.csHeroTitleMobile|raw }}
  31.                 </{{ content.caseStudyHeroSeoHeadlineTitle ? content.caseStudyHeroSeoHeadlineTitle : 'h1' }}>
  32.             {% endif %}
  33.             {% if content.caseStudyHeroLinkedItem == 'caseStudyHeroModal' %}
  34.                 <div class="case-study-hero__actions" x-ref="actions">
  35.                     {% include('/includes/popup-cta.html.twig') with { label: content.buttonUrlLabel, buttonColor: content.buttonUrlColor, buttonSize: content.buttonUrlSize } %}
  36.                 </div>
  37.             {% elseif content.caseStudyHeroActionLink %}
  38.                 <div class="case-study-hero__actions" x-ref="actions">
  39.                     <a href="{{ content.caseStudyHeroActionLink }}" class="button button--{{ content.buttonUrlColor }}">
  40.                     <span class="button__inner">
  41.                         {{ content.buttonUrlLabel }}
  42.                     </span>
  43.                     </a>
  44.                 </div>
  45.             {% endif %}
  46.         </div>
  47.         <div class="case-study-hero__media">
  48.             {% if content.image %}
  49.                 <img class="case-study-hero__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  50.                      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"
  51.                      alt="{{ content.caseStudyHeroImageALT|default(content.image.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 1440px, 100vw">
  52.             {% endif %}
  53.         </div>
  54.     </div>
  56. {% if content.caseStudyHeroLinkedItem == 'caseStudyHeroModal' %}
  57.     {% if content.caseStudyHeroDownloadFormBlock %}
  58.         {% include('/includes/blocks/' ~ content.caseStudyHeroDownloadFormBlock.type ~ '.html.twig') with { content: content.caseStudyHeroDownloadFormBlock, view: view.caseStudyHeroDownloadFormBlock } %}
  59.     {% endif %}
  60. </div>
  61. {% endif %}