Skip to main content

Social Media Links

Component status:Ready
A collection of links to social media accounts.

Social media links on your webpages enable our audiences to quickly engage with our brand on our social media channels. Applying a consistent visual language for how social media icons display removes the guesswork — and keeps our audiences focused on our content.

Social media links are included within the site footer, but may also be used in other contexts.

Examples#

Choose your social link variant based on the color of the background behind the links. This is done by adding one of the following modifier classes on the base <ul> element: bux-social-links--white, bux-social-links--light, or bux-social-links--dark.

White#

To be used on a white background.

<ul class="bux-social-links bux-social-links--white">
<li class="bux-social-links__item bux-social-links__item--Facebook">
<a class="bux-social-links__link" href="https://facebook.com" 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://instagram.com" 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" 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://linkedin.com" 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/@theohiostateuniversity"
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/link/v2?aid=1988&lang=en&scene=bio_url&target=lnk.bio%2Fohiostate"
target="_blank"
>
<span class="visually-hidden">TikTok profile — external</span>
<span class="icon icon-tiktok" aria-hidden="true"></span>
</a>
</li>
</ul>

Light#

To be used on a light non-white background.

Dark#

To be used on a dark neutral-colored background.

Social icon classes#

Icon images are SVGs added via an <span> element as shown in the above example. Each icon class array must include the icon class as well as the class pertaining to the specific icon.

The table below lists built-in icons with their corresponding class names.

Icon NameIcon Class
Facebookicon-facebook
Flickricon-flickr
Instagramicon-instagram
LinkedInicon-linkedin
Redditicon-reddit
RSSicon-rss
Snapchaticon-snapchat
TikTokicon-tiktok
Xicon-x
Vimeoicon-vimeo
YouTubeicon-youtube

Usage#

Dos#

Don’ts#

  • Don't alter color of the icons
  • Don't alter the background of the icons

Accessibility#

Because the links are not text based it is necessary to provide context about the link for screen reader users. We are doing this via a visually-hidden span that explains what the link is for and that it is an external link.

<span class="visually-hidden">Facebook profile — external</span>