<div class="social-media-links">
<div class="social-media-links__headline">
<h2 class="headline headline--3"><span class="headline__text">Unternehmen XY auf Social Media</span></h2>
</div>
<ul class="social-media-links__links" role="list">
<li class="social-media-links__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="social-media-links__link">
<a class="icon-button" title="Facebook" href="#">
<span class="icon-button__icon">
<svg class="icon icon--facebook" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#facebook"></use>
</svg> </span>
</a>
</li>
<li class="social-media-links__link">
<a class="icon-button" title="WhatsApp" href="#">
<span class="icon-button__icon">
<svg class="icon icon--whatsapp" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#whatsapp"></use>
</svg> </span>
</a>
</li>
<li class="social-media-links__link">
<a class="icon-button" title="Instagram" href="#">
<span class="icon-button__icon">
<svg class="icon icon--instagram" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#instagram"></use>
</svg> </span>
</a>
</li>
</ul>
</div>
<div {{ html_attributes({
id: id ?? false,
class: 'social-media-links',
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="social-media-links__headline">
{% include '@headline' with headline | merge({
size: 3,
level: 2,
}) only %}
</div>
{% endif %}
<ul {{ html_attributes({
class: 'social-media-links__links',
'aria-label': not headline|default ? ('Social Media Links' | t('site')),
role: 'list',
}) }}>
{% for link in links %}
<li class="social-media-links__link">
{% include '@icon-button' with link only %}
</li>
{% endfor %}
</ul>
</div>
{
"headline": {
"text": "Unternehmen XY auf Social Media"
},
"links": [
{
"icon": "linkedin",
"title": "LinkedIn",
"link": "#"
},
{
"icon": "facebook",
"title": "Facebook",
"link": "#"
},
{
"icon": "whatsapp",
"title": "WhatsApp",
"link": "#"
},
{
"icon": "instagram",
"title": "Instagram",
"link": "#"
}
]
}
:root {
--social-media-links-text-align: center;
--social-media-links-links-align: center;
--social-media-links-icon-button-background-color: transparent;
--social-media-links-icon-button-background-color-active: var(--color-orange);
@include use-responsive-sizing(--social-media-links-icon-button-size, responsive-map(xs 6.2rem, xl 8rem));
@include use-responsive-sizing(--social-media-links-gap, responsive-map(xs 2rem, xl 3rem));
}
.social-media-links__headline {
margin-block-end: calc(var(--social-media-links-gap) * 1.5);
text-align: var(--social-media-links-text-align);
}
.social-media-links__links {
display: flex;
flex-wrap: wrap;
gap: var(--social-media-links-gap);
justify-content: var(--social-media-links-links-align);
}
.social-media-links__link {
--icon-button-background-color: var(--social-media-links-icon-button-background-color);
--icon-button-background-color-active: var(--social-media-links-icon-button-background-color-active);
--icon-button-size: var(--social-media-links-icon-button-size);
--icon-button-icon-size: 0.5em;
display: block;
}
No notes defined.