Markup: templates/output/06-components/contactbox/contactbox-grid.html
<div class="o-grid o-grid-1-1-1@tablet">
<div class="c-contactbox">
<div class="c-contactbox__content">
<div class="c-contactbox__information">
<h3 class="c-contactbox__title">Vorname Nachname</h3>
<div class="c-contactbox__description">
<p>Zusätzliche Beschreibung (optional) Cum sociis natoque penatibus et magnis</p>
</div>
<ul class="c-contactbox__list o-list-bare">
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="tel:+499419439710">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-black"></use>
</svg><span class="c-contactbox__list-text">+49 (0)941 / 943 - 9710</span></a>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="mailto:studienberatung@oth-regensburg.de">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-black"></use>
</svg><span class="c-contactbox__list-text">studienberatung@oth-regensburg.de</span></a>
</li>
</ul>
</div><span class="c-contactbox__cta">Alle Infos zur Person
<svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></span>
</div><a class="c-contactbox__link" href="#container" title="Alle Informationen zu "Vorname Nachname""></a>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"givenName": "Hans-Peter",
"familyName": "Rabl",
"honorificPrefix": "Prof. Dr.-Ing.",
"affiliation": "Fakultät Maschinenbau",
"email": "studienberatung@oth-regensburg.de ",
"telephone": "+4994194302",
"image": "http://photourl",
"address": "Galgenbergstraße 30, Raum D111",
"worksFor": "OTH Regensburg"
}
</script>
</div>
<div class="c-contactbox">
<picture class="c-contactbox__image">
<!-- START RENDER CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
<source srcset="https://picsum.photos/id/1040/906/453" media="(min-width:768px)"/>
<source srcset="https://picsum.photos/id/1040/768/384" media="(min-width:0)"/><img src="https://picsum.photos/id/1040/906/453" width="906" height="453" alt="#" loading="lazy"/>
<!-- END RENDER CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
</picture>
<div class="c-contactbox__content">
<div class="c-contactbox__information">
<h3 class="c-contactbox__title">Prof. Dr.-Ing. Hans-Peter Rabl</h3>
<div class="c-contactbox__description">
<p>Zusätzliche Beschreibung (optional) Cum sociis natoque penatibus et magnis</p>
</div>
<ul class="c-contactbox__list o-list-bare">
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 36 36">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-university"></use>
</svg><span class="c-contactbox__list-text">Fakultät Maschinenbau</span>
</li>
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 38.774 38">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
</svg><span class="c-contactbox__list-text">Galgenbergstraße 30, Raum D111</span>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="mailto:studienberatung@oth-regensburg.de">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-black"></use>
</svg><span class="c-contactbox__list-text">studienberatung@oth-regensburg.de</span></a>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="www.vorname-nachname.de">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-world"></use>
</svg><span class="c-contactbox__list-text">www.vorname-nachname.de</span></a>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="tel:+499419439710">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-black"></use>
</svg><span class="c-contactbox__list-text">+49 (0)941 / 943 - 9710</span></a>
</li>
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 36 36">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-time"></use>
</svg><span class="c-contactbox__list-text">Mo bis Fr 08:30 - 12:00 Uhr<br>Di und Do 13:00 - 15:00 Uhr</span>
</li>
</ul>
</div><span class="c-contactbox__cta">Alle Infos zur Person
<svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></span>
</div><a class="c-contactbox__link" href="#container" title="Alle Informationen zu "Prof. Dr.-Ing. Hans-Peter Rabl""></a>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"givenName": "Hans-Peter",
"familyName": "Rabl",
"honorificPrefix": "Prof. Dr.-Ing.",
"affiliation": "Fakultät Maschinenbau",
"email": "studienberatung@oth-regensburg.de ",
"telephone": "+4994194302",
"image": "http://photourl",
"address": "Galgenbergstraße 30, Raum D111",
"worksFor": "OTH Regensburg"
}
</script>
</div>
<div class="c-contactbox c-contactbox--square-image">
<picture class="c-contactbox__image">
<!-- START RENDER SQUARE CONTACT BOX IMAGE IN SIDEBAR WITH SMALLER IMAGE DIMENSION-->
<!-- START RENDER SQUARE CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
<source srcset="https://picsum.photos/id/1040/904/904" media="(min-width:768px)"/>
<source srcset="https://picsum.photos/id/1040/768/768" media="(min-width:0)"/><img src="https://picsum.photos/id/1040/904/904" width="904" height="904" alt="#" loading="lazy"/>
<!-- END RENDER SQUARE CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
</picture>
<div class="c-contactbox__content">
<div class="c-contactbox__information">
<h3 class="c-contactbox__title">Prof. Dr.-Ing. Hans-Peter Rabl</h3>
<div class="c-contactbox__description">
<p>Zusätzliche Beschreibung (optional) Cum sociis natoque penatibus et magnis</p>
</div>
<ul class="c-contactbox__list o-list-bare">
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 36 36">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-university"></use>
</svg><span class="c-contactbox__list-text">Fakultät Maschinenbau</span>
</li>
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 38.774 38">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
</svg><span class="c-contactbox__list-text">Galgenbergstraße 30, Raum D111</span>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="mailto:studienberatung@oth-regensburg.de">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-black"></use>
</svg><span class="c-contactbox__list-text">studienberatung@oth-regensburg.de</span></a>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="www.vorname-nachname.de">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-world"></use>
</svg><span class="c-contactbox__list-text">www.vorname-nachname.de</span></a>
</li>
<li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="tel:+499419439710">
<svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-black"></use>
</svg><span class="c-contactbox__list-text">+49 (0)941 / 943 - 9710</span></a>
</li>
<li class="c-contactbox__list-item">
<svg class="c-contactbox__icon" viewBox="0 0 36 36">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-time"></use>
</svg><span class="c-contactbox__list-text">Mo bis Fr 08:30 - 12:00 Uhr<br>Di und Do 13:00 - 15:00 Uhr</span>
</li>
</ul>
</div><span class="c-contactbox__cta">Alle Infos zur Person
<svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
</svg></span>
</div><a class="c-contactbox__link" href="#container" title="Alle Informationen zu "Prof. Dr.-Ing. Hans-Peter Rabl""></a>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"givenName": "Hans-Peter",
"familyName": "Rabl",
"honorificPrefix": "Prof. Dr.-Ing.",
"affiliation": "Fakultät Maschinenbau",
"email": "studienberatung@oth-regensburg.de ",
"telephone": "+4994194302",
"image": "http://photourl",
"address": "Galgenbergstraße 30, Raum D111",
"worksFor": "OTH Regensburg"
}
</script>
</div>
</div>
Source:
assets/sass/06-components/_components.contactbox.scss, line 1