Listen-Inhalte @list-content
Personen (einspaltig - Listenseite) @list-content--persons
<!-- Personen (einspaltig - Listenseite) -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
}
]
}
Personen (einspaltig - Personen-Detailseite) @list-content--person3
<!-- Personen (einspaltig - Personen-Detailseite) -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
}
]
}
Personen (einspaltig - Übersichtsseite) @list-content--person
<!-- Personen (einspaltig - Übersichtsseite) -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-person"
}
]
}
Personen (zweispaltig - Übersichtsseite) @list-content--columns
<!-- Personen (zweispaltig - Übersichtsseite) -->
<div class="list-content list-content--columns">
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>{
"columns": true,
"items": [
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
},
{
"use": "list-item-person"
}
]
}
Zweispaltig @list-content--columns-pr
<!-- Zweispaltig -->
<div class="list-content list-content--columns">
<div class="list-content__item">
<article class="list-item list-item--person-pr">
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Prof. Dr. Sven-Erik Behrens</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="#1">Institut für Biochemie und Biotechnologie</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:vorname.name@uni-halle.de">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>vorname.name@uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="tel:+49-123-000-0001">
<svg class="icon icon--phone list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-phone"></use>
</svg>+49 123 00000-0123</a>
</li>
</ul>
</div>
</article>
</div>
</div>{
"columns": true,
"items": [
{
"use": "list-item-person-pr"
}
]
}
Materialien @list-content--materials
<!-- Materialien -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Advertising and the Transformation of Screen Cultures.</i>
<br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-7173-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-7173-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-1bbf-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-1bbf-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Bildes</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://theoldpurple.com/" rel="noopener noreferrer" target="_blank"><span class="link-block__icon"><svg class="icon icon--external link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external"></use>
</svg></span><span class="link-block__text">Externer Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-material"
},
{
"use": "list-item-material--minimal"
},
{
"use": "list-item-material--intern"
},
{
"use": "list-item-material--external"
}
]
}
Materialien @list-content--materials2
<!-- Materialien -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Advertising and the Transformation of Screen Cultures.</i>
<br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-b341-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-b341-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-e3ac-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-e3ac-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Bildes</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://theoldpurple.com/" rel="noopener noreferrer" target="_blank"><span class="link-block__icon"><svg class="icon icon--external link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external"></use>
</svg></span><span class="link-block__text">Externer Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Advertising and the Transformation of Screen Cultures.</i>
<br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-b529-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-b529-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Advertising and the Transformation of Screen Cultures.</i>
<br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--material">
<div class="list-item__content">
<ul class="list-item__list">
<li class="list-item__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-c84a-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-c84a-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</li>
</ul>
</div>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-material"
},
{
"use": "list-item-material--minimal"
},
{
"use": "list-item-material--intern"
},
{
"use": "list-item-material--external"
},
{
"use": "list-item-material"
},
{
"use": "list-item-material--minimal"
},
{
"use": "list-item-material--intern"
},
{
"use": "list-item-material--minimal"
},
{
"use": "list-item-material--intern"
}
]
}
Suchergebnisse @list-content--search
<!-- Suchergebnisse -->
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Seite</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter</h3>
</div>
<p>… em ipsum
<mark class="mark">Student</mark> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntet dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum…</p>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zum Suchergebnis</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Download</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Dokument mit
<mark class="mark">Student</mark> im Dateinamen</h3>
</div><span class="u-hidden-visually"> (</span>PDF, 12KB, barrierefrei<span class="u-hidden-visually">)</span>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--download" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>
</a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Seite</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter</h3>
</div>
<p>… em ipsum
<mark class="mark">Student</mark> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntet dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum…</p>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zum Suchergebnis</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Download</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Dokument mit
<mark class="mark">Student</mark> im Dateinamen</h3>
</div><span class="u-hidden-visually"> (</span>PDF, 12KB, barrierefrei<span class="u-hidden-visually">)</span>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--download" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>
</a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Seite</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter Bewerbung für das Studium als
<mark class="mark">Student</mark>ische Mitarbeiter</h3>
</div>
<p>… em ipsum
<mark class="mark">Student</mark> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntet dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum…</p>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zum Suchergebnis</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--search">
<div class="list-item__content">
<div class="list-item__kicker">Download</div>
<div class="list-item__headline">
<h3 class="headline headline--7">Dokument mit
<mark class="mark">Student</mark> im Dateinamen</h3>
</div><span class="u-hidden-visually"> (</span>PDF, 12KB, barrierefrei<span class="u-hidden-visually">)</span>
<div class="list-item__link" aria-hidden="true">http://www.uni-halle.de/dieURLzumSuchergebnis</div>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--download" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>
</a>
</article>
</div>
</div>{
"items": [
{
"use": "list-item-search"
},
{
"use": "list-item-search--download"
},
{
"use": "list-item-search"
},
{
"use": "list-item-search--download"
},
{
"use": "list-item-search"
},
{
"use": "list-item-search--download"
}
]
}