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

  1. {% set claims =  content.claims|split(',') %}
  2. <div class="claim-hero claim-hero--{% if content.inverted %}inverted {% else %} default {% endif %} pt-hero-small pb-m"
  3.      x-data="claimhero" data-claims="{{ claims|json_encode() }}">
  4.     <svg class="claim-hero__background" preserveaspectratio="xMidYMid slice" fill="none"
  5.          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 872" x-ref="background">
  6.         <path d="M-331.621 116.307 1770 1329M1372.15-155 1770 1329M1372.15-155v1484M912.73-155v1484M1770-155.923 912.729 1329M-331.621 1057.67 1770-155M1372.15 1329 1770-155M1372.15 1329V-155M912.73 1329V-155M1770 1329.9 912.729-155M1771.92 1057.84-329.999-155M67.855 1329-330-155.001M67.855 1329V-155.001M527.273 1329V-155.001M-329.998 1329.9 527.273-155.001M1770.82 116.78-329.999 1329M67.856-155.001-330 1329M67.856-155.001V1329M527.273-155.001V1329M-329.998-155.923 527.273 1329"
  7.               stroke="currentColor" stroke-miterlimit="10"/>
  8.     </svg>
  9.     <div class="claim-hero__container">
  10.         <{{ content.claimHeroSeoHeadlineClaim ? content.claimHeroSeoHeadlineClaim : 'div' }} class="claim-hero__title hl-1" x-ref="title">
  11.             <span x-ref="titlebefore">{{ content.titlebefore|raw }}</span>
  12.             <span x-ref="claim" class="word claim-hero__claim" x-text="currentClaim"></span>
  13.             <span x-ref="titleafter" class="claim-hero__titleafter">{{ content.titleafter|raw }}</span>
  14.         </{{ content.claimHeroSeoHeadlineClaim ? content.claimHeroSeoHeadlineClaim : 'div' }}>
  15.         <{{ content.claimHeroSeoHeadlineText ? content.claimHeroSeoHeadlineText : 'h1' }} class="claim-hero__text" x-ref="text">
  16.             {{ content.text|raw }}
  17.         </{{ content.claimHeroSeoHeadlineText ? content.claimHeroSeoHeadlineText : 'h1' }}>
  18.         <div class="claim-hero__actions" x-ref="actions">
  19.             {% if content.claimHeroActionLink != null %}
  20.                 {% if content.claimHeroButtonType == 'box' %}
  21.                     <a href="{{ content.claimHeroActionLink }}"
  22.                        class="button button--{{ content.claimHeroButtonColor }} button--size-{{ content.claimHeroButtonSize }}">
  23.                         <span class="button__inner">
  24.                             {{ content.claimHeroButtonLabel }}
  25.                         </span>
  26.                     </a>
  27.                 {% elseif content.claimHeroButtonType == 'text' %}
  28.                     <a href="{{ content.claimHeroActionLink }}"
  29.                        class="text-button text-button--{{ content.claimHeroTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  30.                         {{ content.claimHeroButtonLabel }}
  31.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  32.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  33.                                   stroke-linecap="round" stroke-linejoin="round"/>
  34.                         </svg>
  35.                     </a>
  36.                 {% endif %}
  37.             {% endif %}
  38.         </div>
  39.         <div class="claim-hero__graphic" x-ref="graphic">
  40.             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 25">
  41.                 <path fill-rule="evenodd" clip-rule="evenodd" d="M25 25L50 0H25v25z" fill="#00F"/>
  42.                 <path fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0l25 25V0z" fill="#FF73F5"/>
  43.             </svg>
  44.         </div>
  45.     </div>
  46. </div>