templates/includes/blocks/person-teaser.html.twig line 1

  1. <div class="person-teaser person-teaser--orientation-{% if content.reverse %}reverse {% else %}default {% endif %}  {{ content.top }} {{ content.bottom }}"
  2.      x-data="personteaser" itemscope itemtype="https://schema.org/Person">
  3.     <div class="person-teaser__container">
  4.         {% if content.image %}
  5.             <div class="person-teaser__media">
  6.                 <img class="person-teaser__image" itemprop="image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  7.                      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"
  8.                      alt="{{ content.personTeaserImageALT|default(content.image.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  9.             </div>
  10.         {% endif %}
  11.         <div class="person-teaser__info" x-ref="info">
  12.             <div class="person-teaser__name">
  13.                 <span itemprop="name">{{ content.person_name|raw }}</span>
  14.                 {% if content.person_title %}
  15.                     <div class="person-teaser__title" itemprop="jobTitle">
  16.                         {{ content.person_title }}
  17.                     </div>
  18.                 {% endif %}
  19.             </div>
  20.             {% if content.text %}
  21.                 <div class="person-teaser__content" x-ref="content" itemprop="description">
  22.                     {{ content.text|raw }}
  23.                 </div>
  24.             {% endif %}
  25.             {% if content.email %}
  26.                 <a href="mailto:{{ content.email }}" class="person-teaser__email" x-ref="email" itemprop="email">
  27.                     {{ content.email }}
  28.                 </a>
  29.             {% endif %}
  30.             {% if content.personTeaserActionLink != null %}
  31.                 <div class="person-teaser__actions" x-ref="actions">
  32.                     {% if content.personTeaserButtonType == 'box' %}
  33.                         <a href="{{ content.personTeaserActionLink }}"
  34.                            class="button button--{{ content.personTeaserButtonColor }} button--size-{{ content.personTeaserButtonSize }}">
  35.                             <span class="button__inner">
  36.                                 {{ content.personTeaserButtonLabel }}
  37.                             </span>
  38.                         </a>
  39.                     {% elseif content.personTeaserButtonType == 'text' %}
  40.                         <a href="{{ content.personTeaserActionLink }}"
  41.                            class="text-button text-button--{{ content.personTeaserTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  42.                             {{ content.personTeaserButtonLabel }}
  43.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  44.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  45.                                       stroke-linecap="round" stroke-linejoin="round"/>
  46.                             </svg>
  47.                         </a>
  48.                     {% endif %}
  49.                 </div>
  50.             {% endif %}
  51.         </div>
  52.     </div>
  53. </div>