templates/includes/blocks/before-after.html.twig line 1

  1. <div class="beforeafter {% if content.inverted %} beforeafter--inverted {% endif %}
  2. {{ content.top }} {{ content.bottom }}" x-data="beforeafter">
  3.     <div class="beforeafter__header">
  4.         <div class="beforeafter__top">
  5.             <div class="beforeafter__title mobile-only {% if content.beforeAfterHeadlineFullWidth %}beforeafter__title--full {% endif %}"
  6.                  x-ref="mobiletitle">
  7.                 {% if content.beforeAfterSeoHeadlinePagina %}<{{ content.beforeAfterSeoHeadlinePagina }}>{% endif %}
  8.                 <div class="pagina">
  9.                     {% if content.beforeAfterPagina %}
  10.                         {{ content.beforeAfterPagina }}
  11.                     {% endif %}
  12.                 </div>
  13.                 {% if content.beforeAfterSeoHeadlinePagina %}</{{ content.beforeAfterSeoHeadlinePagina }}>{% endif %}
  14.                 {% if content.beforeAfterTitleMobile %}
  15.                     {{ content.beforeAfterTitleMobile|raw }}
  16.                 {% else %}
  17.                     {{ content.beforeAfterTitleDesktop|raw }}
  18.                 {% endif %}
  19.             </div> {# b eforeafter__title--full #}
  20.             <div class="beforeafter__title desktop-only {% if content.beforeAfterHeadlineFullWidth %}beforeafter__title--full {% endif %}"
  21.                  x-ref="title">
  22.                 {% if content.beforeAfterSeoHeadlinePagina %}<{{ content.beforeAfterSeoHeadlinePagina }}>{% endif %}
  23.                 <div class="pagina">
  24.                     {% if content.beforeAfterPagina %}
  25.                         {{ content.beforeAfterPagina }}
  26.                     {% endif %}
  27.                 </div>
  28.                 {% if content.beforeAfterSeoHeadlinePagina %}</{{ content.beforeAfterSeoHeadlinePagina }}>{% endif %}
  29.                 {{ content.beforeAfterTitleDesktop|raw }}
  30.             </div>
  31.             {% if content.beforeAfterLead %}
  32.                 <div class="beforeafter__lead" x-ref="lead">
  33.                     {{ content.beforeAfterLead|raw }}
  34.                 </div>
  35.             {% endif %}
  36.             {% if content.beforeAfterText %}
  37.                 <div class="beforeafter__text" x-ref="text">
  38.                     {{ content.beforeAfterText | raw}}
  39.                 </div>
  40.             {% endif %}
  41.         </div>
  42.         {% if content.beforeAfterActionLink != null %}
  43.             <div class="beforeafter__actions" x-ref="actions">
  44.                 {% if content.beforeAfterButtonType == 'box' %}
  45.                     <a href="{{ content.beforeAfterActionLink }}"
  46.                        class="button button--{{ content.beforeAfterButtonColor }} button--size-{{ content.beforeAfterButtonSize }}">
  47.                         <span class="button__inner">
  48.                             {{ content.beforeAfterButtonLabel }}
  49.                         </span>
  50.                     </a>
  51.                 {% elseif content.beforeAfterButtonType == 'text' %}
  52.                     <a href="{{ content.beforeAfterActionLink }}"
  53.                        class="text-button text-button--{{ content.beforeAfterTextButtonColor }}
  54.                        {% if content.uppercase %} uppercase {% endif %}">
  55.                         {{ content.beforeAfterButtonLabel }}
  56.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  57.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  58.                                   stroke-linecap="round" stroke-linejoin="round"/>
  59.                         </svg>
  60.                     </a>
  61.                 {% endif %}
  62.             </div>
  63.         {% endif %}
  64.     </div>
  65.     <div class="beforeafter__content">
  66.         <div class="beforeafter__container">
  67.             <div class="beforeafter__bar" x-ref="bar">
  68.                 <div class="beforeafter__bar-before">
  69.                     {{ content.beforeAfterTitleBefore }}
  70.                 </div>
  71.                 <div class="beforeafter__bar-after">
  72.                     {{ content.beforeAfterTitleAfter }}
  73.                 </div>
  74.             </div>
  75.             <div class="beforeafter__items" x-ref="items">
  76.                 {% for item in content.subblocks %}
  77.                         <div class="beforeafter__before">
  79.                             <div class="beforeafter__before-title">
  80.                                 {{content.beforeAfterTitleBefore  }}
  81.                             </div>
  82.                             <div class="beforeafter__before-headline {% if item.beforeAfterBlockMobileTitleBefore %}desktop-only {% endif %}">
  83.                                 {{ item.beforeAfterBlockDesktopTitleBefore|raw }}
  84.                             </div>
  85.                             {% if item.beforeAfterBlockMobileTitleBefore %}
  86.                                 <div class="beforeafter__before-headline mobile-only">
  87.                                     {{ item.beforeAfterBlockMobileTitleBefore|raw }}
  88.                                 </div>
  89.                             {% endif %}
  90.                             <div class="beforeafter__before-text">
  91.                                 {{ item.beforeAfterBlockTextBefore|raw }}
  92.                             </div>
  93.                         </div>
  94.                         <div class="beforeafter__after">
  95.                             <div class="beforeafter__after-title">
  96.                               {{ content.beforeAfterTitleAfter }}
  97.                             </div>
  98.                             <div class="beforeafter__after-headline {% if item.beforeAfterBlockMobileTitleAfter %}desktop-only {% endif %}">
  99.                                 {{ item.beforeAfterBlockDesktopTitleAfter|raw }}
  100.                             </div>
  101.                             {% if item.beforeAfterBlockMobileTitleAfter %}
  102.                                 <div class="beforeafter__after-headline mobile-only">
  103.                                     {{ item.beforeAfterBlockMobileTitleAfter|raw }}
  104.                                 </div>
  105.                             {% endif %}
  106.                             <div class="beforeafter__after-text">
  107.                                 {{ item.beforeAfterBlockTextAfter|raw }}
  108.                             </div>
  109.                         </div>
  110.                 {% endfor %}
  111.             </div>
  112.         </div>
  113.     </div>
  114. </div>