<div class="contact">
<div class="contact__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="400" height="400" src="https://via.placeholder.com/400x400/A0A0A6/FFFFFF.png?text=400x400" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="400" height="400" data-src="https://via.placeholder.com/400x400/A0A0A6/FFFFFF.png?text=400x400" /></div>
</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 image
.contact__image
+include('@image', image)
.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)}
{
"image": {
"width": 400,
"height": 400
},
"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 {
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;
}
There are no notes for this item.