<div id="contact-teaser-grid-63058-23701" class="contact-teaser-grid">
<div class="contact-teaser-grid__headline">
<h2 class="headline headline--3"><span class="headline__text">Noch mehr Fragen? Wir helfen Dir!</span></h2>
</div>
<div class="contact-teaser-grid__contact-teasers">
<div class="contact-teaser-grid__contact-teaser">
<article id="contact-teaser-grid-63058-23701-1" class="contact-teaser">
<div class="contact-teaser__content">
<div class="contact-teaser__headline">
<h2 class="headline headline--3"><span class="headline__text">Vorname Nachname</span><span class="headline__kicker"><span class="u-hidden-visually">, </span>Employer Branding Manager</span></h2>
</div>
<div class="contact-teaser__text">
Musterstraße 1<br>12343 Berlin
</div>
<ul class="contact-teaser__social-links" role="list">
<li class="contact-teaser__social-link">
<a class="icon-button" title="LinkedIn" href="#">
<span class="icon-button__icon">
<svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#linkedin"></use>
</svg> </span>
</a>
</li>
<li class="contact-teaser__social-link">
<a class="icon-button" title="XING" href="#">
<span class="icon-button__icon">
<svg class="icon icon--xing" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#xing"></use>
</svg> </span>
</a>
</li>
</ul>
<ul class="contact-teaser__links" role="list">
<li class="contact-teaser__link">
<a class="icon-button icon-button--clipped" href="tel:+4921187725111">
<span class="icon-button__icon">
<svg class="icon icon--phone" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#phone"></use>
</svg> </span>
<span class="icon-button__text u-underline">+49 211 877 251 11</span>
</a>
</li>
<li class="contact-teaser__link">
<a class="icon-button icon-button--clipped" href="mailto:vorname.nachname@example.com">
<span class="icon-button__icon">
<svg class="icon icon--mail" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#mail"></use>
</svg> </span>
<span class="icon-button__text u-underline">vorname.nachname.nachname@example.com</span>
</a>
</li>
</ul>
</div>
</article>
</div>
<div class="contact-teaser-grid__contact-teaser">
<article id="contact-teaser-grid-63058-23701-2" class="contact-teaser">
<div class="contact-teaser__content">
<div class="contact-teaser__headline">
<h2 class="headline headline--3"><span class="headline__text">Vorname Nachname</span><span class="headline__kicker"><span class="u-hidden-visually">, </span>Employer Branding Manager</span></h2>
</div>
<div class="contact-teaser__text">
Musterstraße 1<br>12343 Berlin
</div>
<ul class="contact-teaser__social-links" role="list">
<li class="contact-teaser__social-link">
<a class="icon-button" title="LinkedIn" href="#">
<span class="icon-button__icon">
<svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#linkedin"></use>
</svg> </span>
</a>
</li>
<li class="contact-teaser__social-link">
<a class="icon-button" title="XING" href="#">
<span class="icon-button__icon">
<svg class="icon icon--xing" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#xing"></use>
</svg> </span>
</a>
</li>
</ul>
<ul class="contact-teaser__links" role="list">
<li class="contact-teaser__link">
<a class="icon-button icon-button--clipped" href="tel:+4921187725111">
<span class="icon-button__icon">
<svg class="icon icon--phone" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#phone"></use>
</svg> </span>
<span class="icon-button__text u-underline">+49 211 877 251 11</span>
</a>
</li>
<li class="contact-teaser__link">
<a class="icon-button icon-button--clipped" href="mailto:vorname.nachname@example.com">
<span class="icon-button__icon">
<svg class="icon icon--mail" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#mail"></use>
</svg> </span>
<span class="icon-button__text u-underline">vorname.nachname.nachname@example.com</span>
</a>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
{% set level = level ??? 2 %}
{% set moreTeaser = moreTeaser ?? false %}
{% set singleMode = contactTeasers|length == 1 and not moreTeaser %}
{% set id = id ??? html_id('contact-teaser-grid') -%}
<div {{ html_attributes({
id: id,
class: 'contact-teaser-grid',
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="contact-teaser-grid__headline">
{% include '@headline' with {
level: level,
size: 3,
} | merge(headline) only %}
</div>
{% endif %}
<div class="contact-teaser-grid__contact-teasers">
{% for contactTeaser in contactTeasers %}
<div class="contact-teaser-grid__contact-teaser">
{% include '@contact-teaser' with {
id: loop.index | namespaceInputId(id),
horizontal: singleMode,
} | merge(contactTeaser) only %}
</div>
{% endfor %}
{% if moreTeaser %}
<div class="contact-teaser-grid__more-teaser">
{% include '@icon-button' with moreTeaser | merge({
overlay: true,
stacked: true,
}) only %}
</div>
{% endif %}
</div>
</div>
{
"headline": {
"text": "Noch mehr Fragen? Wir helfen Dir!"
},
"contactTeasers": [
{
"social": [
{
"icon": "linkedin",
"title": "LinkedIn",
"link": "#"
},
{
"icon": "xing",
"title": "XING",
"link": "#"
}
],
"headline": {
"kicker": "Employer Branding Manager",
"text": "Vorname Nachname"
},
"text": "Musterstraße 1<br>12343 Berlin",
"links": [
{
"icon": "phone",
"text": "+49 211 877 251 11",
"link": "tel:+4921187725111"
},
{
"icon": "mail",
"text": "vorname.nachname.nachname@example.com",
"link": "mailto:vorname.nachname@example.com"
}
]
},
{
"social": [
{
"icon": "linkedin",
"title": "LinkedIn",
"link": "#"
},
{
"icon": "xing",
"title": "XING",
"link": "#"
}
],
"headline": {
"kicker": "Employer Branding Manager",
"text": "Vorname Nachname"
},
"text": "Musterstraße 1<br>12343 Berlin",
"links": [
{
"icon": "phone",
"text": "+49 211 877 251 11",
"link": "tel:+4921187725111"
},
{
"icon": "mail",
"text": "vorname.nachname.nachname@example.com",
"link": "mailto:vorname.nachname@example.com"
}
]
}
]
}
:root {
@include use-responsive-sizing(--contact-teaser-grid-columns, (xs: 1, m: 2));
}
.contact-teaser-grid__headline {
margin-block-end: 3rem;
text-align: center;
}
.contact-teaser-grid__contact-teasers {
display: grid;
grid-auto-rows: auto;
grid-template-columns: repeat(var(--contact-teaser-grid-columns), minmax(0, 1fr));
@include use-responsive-sizing(gap, $gaps);
}
.contact-teaser-grid__contact-teaser {
display: grid;
grid-template-columns: 100%;
}
.contact-teaser-grid__contact-teaser:only-child {
grid-column-end: calc(var(--contact-teaser-grid-columns) + 1);
grid-column-start: 1;
}
.contact-teaser-grid__more-teaser {
--icon-button-line-height: var(--line-height-body);
align-items: center;
background-color: var(--contact-teaser-background-color);
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem;
position: relative;
}
No notes defined.