Social Media Links
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.
#
ExamplesChoose 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
.
#
WhiteTo be used on a white background.
#
LightTo be used on a light non-white background.
<ul class="bux-social-links bux-social-links--light"></ul>
#
DarkTo be used on a dark neutral-colored background.
<ul class="bux-social-links bux-social-links--dark"></ul>
#
Social icon classesIcon 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 Name | Icon Class |
---|---|
icon-facebook | |
Flickr | icon-flickr |
icon-instagram | |
icon-linkedin | |
icon-reddit | |
RSS | icon-rss |
Snapchat | icon-snapchat |
TikTok | icon-tiktok |
X | icon-x |
Vimeo | icon-vimeo |
YouTube | icon-youtube |
#
Usage#
Dos- Use official social media icons from our Icon Library
#
Don’ts- Don't alter color of the icons
- Don't alter the background of the icons
#
AccessibilityBecause 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>