<div class="c-socials">
<ul class="c-socials__list">
<li class="c-socials__list-item"><a href="#" aria-label="website">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-globe-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="facebook">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-facebook-f-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="instagram">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-instagram-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="linkedin">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-linkedin-in-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="twitter">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-twitter-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="dribble">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-dribbble-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="medium">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-medium-m-24px"></use>
</svg> </a>
</li>
<li class="c-socials__list-item"><a href="#" aria-label="slideshare">
<svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-slideshare-24px"></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>
/* No context defined. */
.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.