Merced Component Library

Social 

<div class="social_nav">
    <div class="social_nav_header">
        <h2 class="social_nav_title" id="social_nav_title">Social Nav Title</h2>
    </div>
    <ul class="social_nav_list" aria-labelledby="social_nav_title">
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_instagram" href="//www.instagram.com" target="_blank" rel="noopener">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-instagram"></i>
                </span>
                <span class="social_nav_label">Instagram</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_facebook" href="//www.facebook.com" target="_blank" rel="noopener">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-facebook"></i>
                </span>
                <span class="social_nav_label">Facebook</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_twitter" href="//www.twitter.com" target="_blank" rel="noopener">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-twitter"></i>
                </span>
                <span class="social_nav_label">Twitter</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">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-linkedin"></i>
                </span>
                <span class="social_nav_label">Linkedin</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_snapchat" href="//www.snapchat.com" target="_blank" rel="noopener">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-snapchat"></i>
                </span>
                <span class="social_nav_label">Snapchat</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_tiktok" href="//www.tiktok.com" target="_blank" rel="noopener">
                <span class="social_nav_icon">
                    <i class="fa-brands fa-tiktok"></i>
                </span>
                <span class="social_nav_label">TikTok</span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include navigation('social') with {
		modifier: 'lg',
		title: 'Social Navigation',
		links: [{ 'title': 'Facebook', 'url': '#' }]
	} %}
#}

<div class="social_nav{% if modifier %} social_nav_{{ modifier }}{% endif %}">
	<div class="social_nav_header">
		<h2 class="social_nav_title" id="social_nav_title{% if modifier %}_{{ modifier }}{% endif %}">{{ title }}</h2>
	</div>
	<ul class="social_nav_list" aria-labelledby="social_nav_title{% if modifier %}_{{ modifier }}{% endif %}">
		{% 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">
					<span class="social_nav_icon">
						<i class="fa-brands fa-{{ link.title|lower }}"></i>
					</span>
					<span class="social_nav_label">{{ link.title }}</span>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.