<div class="n7-social-links grid gap-1 md:flex md:gap-6">
<ul class="flex items-center gap-4">
<li class="flex items-center">
<a href="" class="n7-link
text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
<span class="sr-only">Vai al profilo Facebook di ???</span>
<svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="" class="n7-link
text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
<span class="sr-only">Vai al profilo Instagram di ???</span>
<svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="" class="n7-link
text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
<span class="sr-only">Vai al canale YouTube di ???</span>
<svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
</ul>
</div>
<div class="n7-social-links{% if wrapperClasses %} {{ wrapperClasses }}{% else %} grid gap-1 md:flex md:gap-6{% endif %}">
{% if label %}<h2 {% if labelClasses %}class="{{ labelClasses }}" {% endif %}id="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}">{{ label }}</h2>{% endif %}
<ul{% if id %} id="{{ id }}"{% endif %} class="flex items-center{% if listGap %} {{ listGap }}{% endif %}{% if classes %} {{ classes }}{% endif %}"{% if label %} aria-labelledby="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}"{% endif %}>
{% for item in items %}
<li class="{% if itemClasses %}{{ itemClasses }}{% endif %}">
{% render '@link--lg',{ label:item.label, iconOnly:true, icon:item.icon, classes:'text-2xl n7-content-01 p-2 xl:p-1', iconSize: linkIconSize }, true %}
</li>
{% endfor %}
</ul>
</div>
{
"listGap": "gap-4",
"linkIconSize": "w-8 h-8 lg:w-6 lg:h-6",
"itemClasses": "flex items-center",
"items": [
{
"label": "Vai al profilo Facebook di ???",
"icon": "solid--facebook"
},
{
"label": "Vai al profilo Instagram di ???",
"icon": "solid--instagram"
},
{
"label": "Vai al canale YouTube di ???",
"icon": "solid--youtube"
}
]
}
Social links component.
Configurations: