Skip to main content

Social Media Links

Component status:Beta
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.

Social Media Links Variants#

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--Twitter">
<a class="bux-social-links__link" href="https://twitter.com" target="_blank">
<span class="visually-hidden">Twitter profile — external</span>
<i class="icon icon-twitter"></i>
</a>
</li>
<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>
<i class="icon icon-facebook"></i>
</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>
<i class="icon icon-instagram"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--YouTube">
<a class="bux-social-links__link" href="https://youtube.com" target="_blank">
<span class="visually-hidden">YouTube profile — external</span>
<i class="icon icon-youtube"></i>
</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 <i> 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
Twittericon-twitter
Vimeoicon-vimeo
YouTubeicon-youtube

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">Twitter profile — external</span>