<ul class="bux-social-links bux-social-links--dark">
<li class="bux-social-links__item bux-social-links__item--Facebook">
<a class="bux-social-links__link" href="https://www.facebook.com/osu/" target="_blank">
<span class="visually-hidden">Facebook profile — external</span>
<span class="icon icon-facebook" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Instagram">
<a class="bux-social-links__link" href="https://www.instagram.com/theohiostateuniversity/" target="_blank">
<span class="visually-hidden">Instagram profile — external</span>
<span class="icon icon-instagram" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--X">
<a class="bux-social-links__link" href="https://twitter.com/OhioState" target="_blank">
<span class="visually-hidden">X profile — external</span>
<span class="icon icon-x" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--LinkedIn">
<a class="bux-social-links__link" href="https://www.linkedin.com/school/the-ohio-state-university/" target="_blank">
<span class="visually-hidden">LinkedIn profile — external</span>
<span class="icon icon-linkedin" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--YouTube">
<a class="bux-social-links__link" href="https://www.youtube.com/user/ohiostateuniversity" target="_blank">
<span class="visually-hidden">YouTube profile — external</span>
<span class="icon icon-youtube" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--TikTok">
<a class="bux-social-links__link" href="https://www.tiktok.com/@theohiostateuniversity" target="_blank">
<span class="visually-hidden">TikTok profile — external</span>
<span class="icon icon-tiktok" aria-hidden="true"></span>
</a>
</li>
</ul>
{#
Social Links
Available variables:
- background_color: Sets the background color for the social links.
Allowed values: light, white, dark.
- social_links: Array containing the social link items
- social_link.name: Name of the social media item. Read by screen readers.
- social_link.icon: Icon name for the social media item. Machine name from
the BUX Icon library.
- social_link.url: URL for the social media item.
#}
<ul class="bux-social-links{% if background_color %} bux-social-links--{{ background_color }}{% endif %}">
{% for social_link in social_links %}
<li class="bux-social-links__item bux-social-links__item--{{ social_link.name }}">
<a class="bux-social-links__link" href="{{ social_link.url }}" target="_blank">
<span class="visually-hidden">{{ social_link.name }} profile — external</span>
<span class="icon {{ social_link.icon }}" aria-hidden="true"></span>
</a>
</li>
{% endfor %}
</ul>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
social_links:
'1':
name: Facebook
icon: icon-facebook
url: https://www.facebook.com/osu/
'2':
name: Instagram
icon: icon-instagram
url: https://www.instagram.com/theohiostateuniversity/
'3':
name: X
icon: icon-x
url: https://twitter.com/OhioState
'4':
name: LinkedIn
icon: icon-linkedin
url: https://www.linkedin.com/school/the-ohio-state-university/
'5':
name: YouTube
icon: icon-youtube
url: https://www.youtube.com/user/ohiostateuniversity
'6':
name: TikTok
icon: icon-tiktok
url: https://www.tiktok.com/@theohiostateuniversity
background_color: dark
@mixin social-links($link-color: $gray-dark-80, $hover-bg-color: $gray-light-60) {
.bux-social-links__item {
display: inline-block;
margin-right: $sp-8;
&:last-child {
margin-right: 0;
}
}
.bux-social-links__link {
@include link-reset();
color: $link-color;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 44px;
height: 44px;
&:hover {
background-color: $hover-bg-color;
color: $link-color;
}
&:focus {
outline: 2px solid $focus;
background-color: $hover-bg-color;
color: $link-color;
}
span {
font-size: $ts-20;
line-height: 0;
}
}
}
.bux-social-links,
.bux-social-links--light,
.bux-social-links--white {
@include social-links();
}
.bux-social-links--dark {
@include social-links($white, $gray-dark-40);
}
No notes defined.