Social Media Links

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--light">
  <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>

{#
Buckeye UX - version 1.0.15
Copyright (C) 2024 The Ohio State University
#}

{# 

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>

Light

To be used on a light non-white background.

<ul class="bux-social-links bux-social-links--light"></ul>

Dark

To be used on a dark neutral-colored background.

<ul class="bux-social-links bux-social-links--dark"></ul>

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 Name	Icon Class
Facebook	`icon-facebook`
Flickr	`icon-flickr`
Instagram	`icon-instagram`
LinkedIn	`icon-linkedin`
Reddit	`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

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>

Examples​

White​

Light​

Dark​

Social icon classes​

Usage​

Dos​

Don’ts​

Accessibility​