<div class="c-socials">
<ul class="c-socials__list">
<li class="c-socials__list-item"><a href="" aria-label="">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="" aria-label="">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="" aria-label="">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#"></use>
</svg> </a>
</li>
</ul>
</div>
<div class="c-socials{% if modifier is defined %} {{ modifier }}{% endif %}">
<ul class="c-socials__list">
{% for item in socialList %}
<li class="c-socials__list-item">
{%- set social = item.name|split('|') -%}
<a href="{{ item.url }}" aria-label="{{social[0]}}">
{% include "@icon" with {
modifier: "c-icon--20",
symbol: social[1]
} %}
</a>
</li>
{% endfor %}
</ul>
</div>
{
"socialList": [
{
"class": "addthis_button_facebook",
"symbol": "icn-facebook-f-24px"
},
{
"class": "addthis_button_twitter",
"symbol": "icn-twitter-24px"
},
{
"class": "addthis_button_linkedin",
"symbol": "icn-linkedin-in-24px"
}
]
}
.c-socials__list {
display: flex;
list-style: none;
}
.c-socials__list-item {
color: useHSL(--primary-100);
a {
color: currentColor;
}
}
.c-socials__list-item + .c-socials__list-item {
margin-left: spacing(space-16);
}
No notes defined.