templates/includes/blocks/generic-grid.html.twig line 1

  1. <div class="generic-grid generic-grid--cols-{{ content.cols }} {% if content.inverted %}generic-grid--inverted {% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="genericgrid">
  3.     <div class="generic-grid__container" x-ref="container">
  4.         <div class="generic-grid__inner" x-ref="inner">
  5.             {% for teaser in content.subblocks %}
  6.                 <div class="generic-teaser{% if content.inverted %} generic-teaser--inverted {% endif %}{% if teaser.icon %} generic-teaser--icon {% endif %}">
  7.                     {% if teaser.image %}
  8.                         <div class="generic-teaser__image">
  9.                             <img src="{{ teaser.image|thumbnailUrl('2880x') }}"
  10.                                  srcset ="{{ teaser.image|thumbnailUrl('320x') }} 320w, {{ teaser.image|thumbnailUrl('640x') }} 640w, {{ teaser.image|thumbnailUrl('1280x') }} 1280w, {{ teaser.image|thumbnailUrl('1440x') }} 1440w, {{ teaser.image|thumbnailUrl('2048x') }} 2048w"
  11.                                  alt="{{ teaser.genericTeaserImageALT|default(teaser.image.description|striptags) }}" x-ref="image"
  12.                                  sizes="(min-width: 1440px) {{ 1440 / content.cols }}px, (min-width: 768px) {{ (100 / content.cols)|round }}vw, 100vw">
  13.                         </div>
  14.                     {% endif %}
  15.                     <div class="generic-teaser__inner">
  16.                         <div class="generic-teaser__content">
  17.                             {{ teaser.text|raw }}
  18.                         </div>
  19.                         {% if teaser.genericTeaserActionLink != null %}
  20.                             <div class="generic-teaser__actions">
  21.                                 {% if teaser.genericTeaserButtonType == 'box' %}
  22.                                     <a href=" {{ teaser.genericTeaserActionLink }}"
  23.                                        class="button button--{{ teaser.genericTeaserButtonColor }} button--size-{{ teaser.genericTeaserButtonSize }}">
  24.                                         <span class="button__inner">
  25.                                             {{ teaser.genericTeaserButtonLabel }}
  26.                                         </span>
  27.                                     </a>
  28.                                 {% elseif teaser.genericTeaserButtonType == 'text' %}
  29.                                     <a href="{{ teaser.genericTeaserActionLink }}"
  30.                                        class="text-button text-button--{{ teaser.genericTeaserTextButtonColor }} {% if teaser.uppercase %} uppercase {% endif %}">
  31.                                         {{ teaser.genericTeaserButtonLabel }}
  32.                                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  33.                                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor"
  34.                                                   stroke-miterlimit="10" stroke-linecap="round"
  35.                                                   stroke-linejoin="round"/>
  36.                                         </svg>
  37.                                     </a>
  38.                                 {% endif %}
  39.                             </div>
  40.                         {% endif %}
  41.                     </div>
  42.                 </div>
  43.             {% endfor %}
  44.         </div>
  45.         {% if content.genericGridActionLink != null %}
  46.             <div class="generic-grid__actions" x-ref="actions">
  47.                 {% if content.genericGridButtonType == 'box' %}
  48.                     <a href="{{ content.genericGridActionLink }}"
  49.                        class="button button--{{ content.genericGridButtonColor }} button--size-{{ content.genericGridButtonSize }}">
  50.                         <span class="button__inner">
  51.                             {{ content.genericGridButtonLabel }}
  52.                         </span>
  53.                     </a>
  54.                 {% elseif content.genericGridButtonType == 'text' %}
  55.                     <a href="{{ content.genericGridActionLink }}"
  56.                        class="text-button text-button--{{ content.genericGridTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  57.                         {{ content.genericGridButtonLabel }}
  58.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  59.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  60.                                   stroke-linecap="round" stroke-linejoin="round"/>
  61.                         </svg>
  62.                     </a>
  63.                 {% endif %}
  64.             </div>
  65.         {% endif %}
  66.     </div>
  67. </div>