Framework Component Library

Social 

<div class="
		social-nav
				
	" id="social-nav-1">
    <div class="social-nav__header">
        <h2 class="social-nav__title" id="social-nav-1__title">Social Nav Title</h2>
    </div>
    <ul class="social-nav__list" aria-labelledby="social-nav-1__title">
        <li class="social-nav__item social-nav__itemfacebook">

            <a class="social-nav__item-link
 				" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Facebook</span>
                    <span class="social-nav__item-link-icon" aria-hidden="true">
                        <svg class="icon icon--facebook">
                            <use href="/images/icons.svg?1.0.0#facebook" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="social-nav__item social-nav__itemx">

            <a class="social-nav__item-link
 				" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">X</span>
                    <span class="social-nav__item-link-icon" aria-hidden="true">
                        <svg class="icon icon--x">
                            <use href="/images/icons.svg?1.0.0#x" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="social-nav__item social-nav__iteminstagram">

            <a class="social-nav__item-link
 				" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Instagram</span>
                    <span class="social-nav__item-link-icon" aria-hidden="true">
                        <svg class="icon icon--instagram">
                            <use href="/images/icons.svg?1.0.0#instagram" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="social-nav__item social-nav__itemyoutube">

            <a class="social-nav__item-link
 				" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Youtube</span>
                    <span class="social-nav__item-link-icon" aria-hidden="true">
                        <svg class="icon icon--youtube">
                            <use href="/images/icons.svg?1.0.0#youtube" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="social-nav__item social-nav__itemlinkedin">

            <a class="social-nav__item-link
 				" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Linkedin</span>
                    <span class="social-nav__item-link-icon" aria-hidden="true">
                        <svg class="icon icon--linkedin">
                            <use href="/images/icons.svg?1.0.0#linkedin" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include '@navigation-social' with {
		classes: {
			modifiers: ['modifier'],
			utility: ''
		},
		title: 'Social Navigation',
		links: [{ 'title': 'Facebook', 'url': '#' }]
	} %}
#}

{% set id = uniqid('social-nav') %}

<div
	class="
		social-nav
		{% for modifier in classes.modifiers %}
			{{ 'social-nav--' ~ modifier }}
		{% endfor %}
		{{ classes.utility }}
	"
	id="{{ id }}"
>
	<div class="social-nav__header">
		<h2 class="social-nav__title" id="{{ id ~ '__title' }}">
			{{- title -}}
		</h2>
	</div>
	<ul class="social-nav__list" aria-labelledby="{{ id ~ '__title' }}">
		{% for link in links %}
			<li class="social-nav__item {{ 'social-nav__item' ~ link.title|lower }}">
				{% include '@partial-link' with {
					classes: {
						base: 'social-nav__item-link'
					},
					attributes: {'target': '_blank'},
					title: link.title,
					url: '#',
					icon: link.title|lower
				} only %}
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.