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">
            <a class="social_nav_link social_nav_link_facebook" href="//www.facebook.com" target="_blank" rel="noopener" title="opens in new window">
                <span class="social_nav_label">
                    Facebook
                </span>
                <span class="social_nav_icon" aria-hidden="true">
                    <svg class="icon icon_facebook">
                        <use href="/images/icons.svg#facebook" />
                    </svg>
                </span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_x" href="//www.x.com" target="_blank" rel="noopener" title="opens in new window">
                <span class="social_nav_label">
                    X
                </span>
                <span class="social_nav_icon" aria-hidden="true">
                    <svg class="icon icon_x">
                        <use href="/images/icons.svg#x" />
                    </svg>
                </span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_instagram" href="//www.instagram.com" target="_blank" rel="noopener" title="opens in new window">
                <span class="social_nav_label">
                    Instagram
                </span>
                <span class="social_nav_icon" aria-hidden="true">
                    <svg class="icon icon_instagram">
                        <use href="/images/icons.svg#instagram" />
                    </svg>
                </span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_youtube" href="//www.youtube.com" target="_blank" rel="noopener" title="opens in new window">
                <span class="social_nav_label">
                    Youtube
                </span>
                <span class="social_nav_icon" aria-hidden="true">
                    <svg class="icon icon_youtube">
                        <use href="/images/icons.svg#youtube" />
                    </svg>
                </span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_linkedin" href="//www.linkedin.com" target="_blank" rel="noopener" title="opens in new window">
                <span class="social_nav_label">
                    Linkedin
                </span>
                <span class="social_nav_icon" aria-hidden="true">
                    <svg class="icon icon_linkedin">
                        <use href="/images/icons.svg#linkedin" />
                    </svg>
                </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">
				<a
					class="social_nav_link social_nav_link_{{ link.title|lower }}"
					href="{{ link.url }}"
					target="_blank"
					rel="noopener"
					title="opens in new window"
				>
					<span class="social_nav_label">
						{{ link.title }}
					</span>
					<span class="social_nav_icon" aria-hidden="true">
						{{ icon(link.title|lower) }}
					</span>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.