<div class="contact">
<div class="contact__image">
<picture>
<source srcset="https://placehold.co/360x360/A0A0A6/FFFFFF.webp?text=360x360-webp" type="image/webp" media="(min-width:48em)" />
<source srcset="https://placehold.co/360x360/A0A0A6/FFFFFF.jpg?text=360x360-jpg" type="image/jpg" media="(min-width:48em)" />
<source srcset="https://placehold.co/400x400/A0A0A6/FFFFFF.webp?text=400x400-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/400/400" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="400" height="400" loading="lazy" />
</picture>
</div>
<div class="contact__text">
<div class="contact__name">Dr. Andreas Kosmider</div>
<div class="contact__position">Bereichsleiter Strategische Initiativen <br />Helmholtz-Gemeinschaft</div>
<div class="contact__details">
<div class="contact__details__item"><svg class="icon icon--mail" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg><span class="contact__details__item__text"><a href="mailto:andreas.kosmider@helmholtz.de">andreas.kosmider@helmholtz.de</a></span></div>
<div class="contact__details__item"><svg class="icon icon--phone" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-phone"></use>
</svg><span class="contact__details__item__text"><a href="tel:+4930206329660">+49 30 206329-660</a></span></div>
<div class="contact__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="contact__details__item__text">Helmholtz-Gemeinschaft, Anna-Louisa-Karsch-Straße 2, 10178 Berlin</span></div>
</div>
</div>
</div>
#{tag || 'div'}.contact()&attributes(attr)
if picture
.contact__image
+include('@picture', picture)
.contact__text
if details
.contact__name !{render(name, true)}
.contact__position !{render(position, true)}
.contact__details
each item in details
.contact__details__item
+include('@icon', { icon: item.icon })
span.contact__details__item__text !{render(item.text, true)}
{
"picture": {
"src": null,
"width": 400,
"height": 400,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/360x360/A0A0A6/FFFFFF.webp?text=360x360-webp",
"type": "webp",
"breakpoint": 768
},
{
"src": "https://placehold.co/360x360/A0A0A6/FFFFFF.jpg?text=360x360-jpg",
"type": "jpg",
"breakpoint": 768
},
{
"src": "https://placehold.co/400x400/A0A0A6/FFFFFF.webp?text=400x400-webp",
"type": "webp",
"breakpoint": null
}
]
},
"name": "Dr. Andreas Kosmider",
"position": "Bereichsleiter Strategische Initiativen <br />Helmholtz-Gemeinschaft",
"details": [
{
"icon": "mail",
"text": "<a href=\"mailto:andreas.kosmider@helmholtz.de\">andreas.kosmider@helmholtz.de</a>"
},
{
"icon": "phone",
"text": "<a href=\"tel:+4930206329660\">+49 30 206329-660</a>"
},
{
"icon": "location",
"text": "Helmholtz-Gemeinschaft, Anna-Louisa-Karsch-Straße 2, 10178 Berlin"
}
]
}
.contact {
@include mq($from: m) {
display: flex;
}
}
.contact__image {
aspect-ratio: 1 / 1;
max-width: 40rem;
padding: 0 0 3rem;
@include mq($from: m) {
padding: 0 4rem 0 0;
}
}
.contact__text {
@include mq($from: m) {
flex-grow: 1;
}
}
.contact__name {
font-weight: $font-weight-bold;
}
.contact__position {
margin-bottom: 1.5rem;
}
.contact__details__item {
padding-left: 3rem;
position: relative;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.contact__details__item .icon {
left: 0;
position: absolute;
top: 0.5rem;
}
.contact__details__item a {
color: $color-blue;
text-transform: underline;
}
default: 400 * 400, ratio 1 / 1
> 768px: 360 * 360, ratio 1 / 1