Front W - Pattern Library

Person Infobox 

<div class="box media media--responsive">
    <div class="media__figure" style="max-width: 210px;">

        <img src="/placeholder/400x400.jpg" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Foto von Herr Prof. Dr. Hans-H. Bleuel" decoding="async" class="img-fluid" width=1440 height=800>
    </div>
    <div class="media__body">
        <h3 class="h6">
            Prof. Dr. Hans-H. Bleuel
        </h3>
        <p>Studiengangsleiter</p>
        <dl class="dl-group">
            <div class="dl-group__row">
                <dt class="dl-group__term">Tel.</dt>
                <dd class="dl-group__value">+49 211 4351-3384</dd>
            </div>
            <div class="dl-group__row">
                <dt class="dl-group__term">E-Mail:</dt>
                <dd class="dl-group__value">h.bleuel@hs-duesseldorf.de</dd>
            </div>
            <div class="dl-group__row">
                <dt class="dl-group__term">Raumbezeichnung</dt>
                <dd class="dl-group__value">
                    <div class="tooltip tooltip--bottom tooltip--align-center">
                        <button aria-describedby="room" class="tooltip__label">
                            03
                        </button>
                        <div role="tooltip" id="room" class="tooltip__content">Gebäude 03</div>
                    </div>.<div class="tooltip tooltip--bottom tooltip--align-center">
                        <button aria-describedby="floor" class="tooltip__label">
                            4
                        </button>
                        <div role="tooltip" id="floor" class="tooltip__content">Etage 4</div>
                    </div>.<div class="tooltip tooltip--bottom tooltip--align-center">
                        <button aria-describedby="room" class="tooltip__label">
                            027
                        </button>
                        <div role="tooltip" id="room" class="tooltip__content">Raum 027</div>
                    </div>
                </dd>
            </div>
        </dl>

        <div class="mt--sm">
            <a href="https://wiwi.hs-duesseldorf.de/personen/hans.bleuel/Seiten/default.aspx" class="cta-link">Zur Personenseite</a>
        </div>
    </div>
</div>
 
<div class="box media media--responsive">
  {% if image %}
  <div class="media__figure" style="max-width: 210px;">
    {% include "@image" with { image: image } %}
  </div>
  {% endif %}
  <div class="media__body">
    <h3 class="h6">
      {{ name }}
    </h3>
    <p>{{ role }}</p>
    <dl class="dl-group">
      <div class="dl-group__row">
        <dt class="dl-group__term">Tel.</dt>
        <dd class="dl-group__value">+49 211 4351-3384</dd>
      </div>
      <div class="dl-group__row">
        <dt class="dl-group__term">E-Mail:</dt>
        <dd class="dl-group__value">h.bleuel@hs-duesseldorf.de</dd>
      </div>
      <div class="dl-group__row">
        <dt class="dl-group__term">Raumbezeichnung</dt>
        <dd class="dl-group__value">{% include '@tooltip' with {text: '03', description: 'Gebäude 03', id: 'room'} %}.{% include '@tooltip' with {text: '4', description: 'Etage 4', id: 'floor'} %}.{% include '@tooltip' with {text: '027', description: 'Raum 027', id: 'room'} %}</dd>
      </div>
    </dl>

    {% if link %}
    <div class="mt--sm">
      <a href="{{ link }}" class="cta-link">Zur Personenseite</a>
    </div>
    {% endif %}
  </div>
</div>
 
{
  "image": {
    "src": "/placeholder/400x400.jpg",
    "alt": "Foto von Herr Prof. Dr. Hans-H. Bleuel"
  },
  "name": "Prof. Dr. Hans-H. Bleuel",
  "role": "Studiengangsleiter",
  "link": "https://wiwi.hs-duesseldorf.de/personen/hans.bleuel/Seiten/default.aspx"
}