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

  1. <div class="boxes{% if content.inverted %} boxes--inverted{% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="boxes">
  3.     <div class="boxes__background">
  4.         <svg preserveaspectratio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg"
  5.              viewbox="0 0 2650 1872">
  6.             <path d="M-2.046 342.242 2650 1872M2147.95 0 2650 1872M2147.95 0v1872M1568.21 0l-.01 1872M2650-1.164 1568.21 1872M-2.046 1529.73 2650 0M2147.94 1872 2650 0M2147.95 1872V0M1568.2 1872l.01-1872M2650 1873.13 1568.21 0M2652.42 1529.95 0 0M502.055 1872 0 0M502.055 1872V0M1081.79 1872V0M-.002 1873.13 1081.79 0M2651.04 342.838 0 1872M502.055 0-.001 1872M502.055 0v1872M1081.79 0v1872M-.002-1.164 1081.79 1872"
  7.                   stroke="currentColor" stroke-miterlimit="10"/>
  8.         </svg>
  9.     </div>
  10.     <div class="boxes__container">
  11.         {% if content.boxesPagina %}
  12.         {% if content.boxesSeoHeadlinePagina %}<{{ content.boxesSeoHeadlinePagina }}>{% endif %}
  13.             <div {% if content.inverted %} style="color: #fff;" {% endif %}
  14.                     class="pagina">
  15.                 {{ content.boxesPagina }}
  16.             </div>
  17.         {% if content.boxesSeoHeadlinePagina %}</{{ content.boxesSeoHeadlinePagina }}>{% endif %}
  18.         {% endif %}
  19.         <div class="boxes__title {% if content.boxesTitleMobile %}desktop-only {% endif %}" x-ref="title">
  20.             {{ content.title|raw }}
  21.         </div>
  22.         {% if content.boxesTitleMobile %}
  23.             <div class="boxes__title mobile-only" x-ref="mobiletitle">
  24.                 {{ content.boxesTitleMobile|raw }}
  25.             </div>
  26.         {% endif %}
  27.         <div class="boxes__actions" x-ref="actions">
  28.             {% if content.boxesActionLink != null %}
  29.                 {% if content.boxesButtonType == 'box' %}
  30.                     <a href="{{ content.boxesActionLink }}"
  31.                        class="button button--{{ content.boxesButtonColor }}
  32.                               button--size-{{ content.boxesButtonSize }}">
  33.                         <span class="button__inner">
  34.                             {{ content.buttonLabel }}
  35.                         </span>
  36.                     </a>
  37.                 {% elseif content.boxesButtonType == 'text' %}
  38.                     <a href="{{ content.boxesActionLink }}"
  39.                        class="text-button text-button--{{ content.boxesTextButtonColor }}
  40.                               {% if content.uppercase %} uppercase {% endif %}">
  41.                         {{ content.buttonLabel }}
  42.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  43.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  44.                                   stroke-linecap="round" stroke-linejoin="round"/>
  45.                         </svg>
  46.                     </a>
  47.                 {% endif %}
  48.             {% endif %}
  49.         </div>
  50.     </div>
  52.     <div class="boxes__boxes">
  53.         <div class="swiper-container" x-ref="swiper">
  54.             <div class="swiper-wrapper" x-ref="container">
  55.                 {% for box in content.subblocks %}
  56.                     <div class="swiper-slide">
  57.                         <div class="boxes-box">
  58.                             <div class="boxes-box__title">
  59.                                 {{ box.title|raw }}
  60.                             </div>
  62.                             <div class="boxes-box__text">
  63.                                 {{ box.text|raw }}
  64.                             </div>
  66.                             <div class="boxes-box__media">
  67.                                 {% if box.background %}
  68.                                     <img src ="{{ box.background|thumbnailUrl('640x') }}"
  69.                                          srcset ="{{ box.background|thumbnailUrl('320x') }} 320w, {{ box.background|thumbnailUrl('640x') }} 640w"
  70.                                          {% if box.background.description|striptags %}alt="{{ box.background.description|striptags }}"{% endif %}
  71.                                          sizes="(min-width: 1440px) 320px, (min-width: 768px) 25vw, 50vw"
  72.                                     >
  73.                                 {% else %}
  74.                                     <svg preserveAspectRatio="xMaxYMax meet" fill="none"
  75.                                          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 206 241">
  76.                                         <path d="M131.188 78.896V5.687h104.583v230.084h-31.375M183.479 57.98v20.916"
  77.                                               stroke="currentColor" stroke-width="10" stroke-miterlimit="10"
  78.                                               stroke-linecap="square"/>
  79.                                         <path d="M162.102 147.462a31.2 31.2 0 00-60.386-5.815H76.993a31.198 31.198 0 00-60.387 5.815S5.688 218.829 5.688 220.084a15.614 15.614 0 0025.1 12.435l42.032-28.122h33.069l42.032 28.122a15.611 15.611 0 0025.1-12.435c0-1.255-10.919-72.622-10.919-72.622zM89.354 99.813V57.979"
  80.                                               stroke="currentColor" stroke-width="10" stroke-miterlimit="10"
  81.                                               stroke-linecap="square"/>
  82.                                         <path d="M47.52 173.021c5.777 0 10.46-4.682 10.46-10.458s-4.683-10.459-10.46-10.459c-5.775 0-10.458 4.683-10.458 10.459s4.683 10.458 10.459 10.458zM131.187 173.021c5.776 0 10.459-4.682 10.459-10.458s-4.683-10.459-10.459-10.459-10.458 4.683-10.458 10.459 4.682 10.458 10.458 10.458z"
  83.                                               fill="currentColor"/>
  84.                                     </svg>
  85.                                 {% endif %}
  86.                                 {# <svg preserveaspectratio="xMaxYMax meet" fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 206 241">
  87.                                     <path d="M131.188 78.896V5.687h104.583v230.084h-31.375M183.479 57.98v20.916" stroke="currentColor" stroke-width="10" stroke-miterlimit="10" stroke-linecap="square"/>
  88.                                     <path d="M162.102 147.462a31.2 31.2 0 00-60.386-5.815H76.993a31.198 31.198 0 00-60.387 5.815S5.688 218.829 5.688 220.084a15.614 15.614 0 0025.1 12.435l42.032-28.122h33.069l42.032 28.122a15.611 15.611 0 0025.1-12.435c0-1.255-10.919-72.622-10.919-72.622zM89.354 99.813V57.979" stroke="currentColor" stroke-width="10" stroke-miterlimit="10" stroke-linecap="square"/>
  89.                                     <path d="M47.52 173.021c5.777 0 10.46-4.682 10.46-10.458s-4.683-10.459-10.46-10.459c-5.775 0-10.458 4.683-10.458 10.459s4.683 10.458 10.459 10.458zM131.187 173.021c5.776 0 10.459-4.682 10.459-10.458s-4.683-10.459-10.459-10.459-10.458 4.683-10.458 10.459 4.682 10.458 10.458 10.458z" fill="currentColor"/>
  90.                                 </svg> #}
  91.                             </div>
  92.                         </div>
  93.                     </div>
  94.                 {% endfor %}
  96.             </div>
  97.         </div>
  98.     </div>
  99. </div>