JHU Sustainability Component Library

Social 

<div class="social_nav" itemprop="creator" itemscope itemtype="http://schema.org/">
    <div class="social_nav_header">
        <h2 class="social_nav_title">
            <span class="social_nav_title_icon">
                <svg class="icon icon_connect">
                    <use href="/images/icons.svg#connect" />
                </svg>
            </span>
            <span class="social_nav_title_label">Social Nav Title</span>
        </h2>
    </div>
    <ul class="social_nav_list" aria-label="Social Nav Title">
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                <span class="social_nav_icon">
                    <svg class="icon icon_twitter">
                        <use href="/images/icons.svg#twitter" />
                    </svg>
                </span>
                <span class="social_nav_label">Twitter</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                <span class="social_nav_icon">
                    <svg class="icon icon_instagram">
                        <use href="/images/icons.svg#instagram" />
                    </svg>
                </span>
                <span class="social_nav_label">Instagram</span>
            </a>
        </li>
        <li class="social_nav_item">
            <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                <span class="social_nav_icon">
                    <svg class="icon icon_newsletter">
                        <use href="/images/icons.svg#newsletter" />
                    </svg>
                </span>
                <span class="social_nav_label">Newletter</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 %}" itemprop="creator" itemscope itemtype="http://schema.org/{{ vars.schemaType }}">
	<div class="social_nav_header">
		<h2 class="social_nav_title">
			<span class="social_nav_title_icon">{{ icon("connect") }}</span>
			<span class="social_nav_title_label">{{ title }}</span>
		</h2>
	</div>
	<ul class="social_nav_list" aria-label="{{ title }}">
		{% for link in links %}
		<li class="social_nav_item">
			<a class="social_nav_link social_nav_link_{{ link.name|lower }}" href="{{ link.href }}" target="_blank" rel="noopener" itemprop="sameAs">
				<span class="social_nav_icon">{{ icon(link.icon) }}</span>
				<span class="social_nav_label">{{ link.title }}</span>
			</a>
		</li>
		{% endfor %}
	</ul>
</div>

No notes defined.