UCLA Web Components

Social

bitbucket Report an Issue Slack Join the Slack Discussion

Display links to official social channels or embed related content.

Usage

Usability Guidance

Follow these best practices in social media content and marketing:

  • Only create unique channels if you have a strategy in place to regularly communicate and engage with customers.
  • Don’t treat social channels like free advertising channels.
  • Use social content to provide value to people.

If you don’t have enough resources or content to maintain social channels, that’s okay. Consider submitting your important content to official UCLA channels instead of investing resources in maintaining your own.

Accessibility Requirements

  • Wrap social media icons in the <nav> element with aria-label="Social" or aria-label="@UCLA Social" to identify links to your channels.

Social Post Tiles

If you embed content from social channels on your website, we recommend displaying it with branded text- or image-based social tiles. Curate posts to match a specific theme, such as campus life, research discoveries, etc., versus a hodgepodge of everything. Regularly update featured posts to ensure content stays current.

Code

<h2>Links</h2>
<!-- Social Media Links (White BG) -->
<div class="social-links-container">
  <a class="social-icon"href="https://www.facebook.com/UCLA/"><span class="social-icon--facebook"></span><span class="visuallyhidden">Facebook</span></a>
  <a href="https://twitter.com/ucla"><span class="social-icon--twitter"></span><span class="visuallyhidden">Twitter</span></a>
  <a href="https://www.instagram.com/ucla/"><span class="social-icon--instagram"></span><span class="visuallyhidden">Instagram</span></a>
  <a href="https://www.snapchat.com/add/uclaofficial"><span class="social-icon--snapchat"></span><span class="visuallyhidden">Snapchat</span></a>
  <a href="https://www.linkedin.com/company/ucla"><span class="social-icon--linkedin"></span><span class="visuallyhidden">Linked</span></a>
  <a href="https://www.youtube.com/user/UCLA"><span class="social-icon--youtube"></span><span class="visuallyhidden">Youtube</span></a>
  <a href="https://www.tiktok.com/@ucla"><span class="social-icon--tiktok"></span><span class="visuallyhidden">Tiktok</span></a>
</div>

<!-- Social Media Links (Blue BG) -->
<div class="social-links-container--blue">
  <a class="social-icon"href="https://www.facebook.com/UCLA/"><span class="social-icon--facebook"></span><span class="visuallyhidden">Facebook</span></a>
  <a href="https://twitter.com/ucla"><span class="social-icon--twitter"></span><span class="visuallyhidden">Twitter</span></a>
  <a href="https://www.instagram.com/ucla/"><span class="social-icon--instagram"></span><span class="visuallyhidden">Instagram</span></a>
  <a href="https://www.snapchat.com/add/uclaofficial"><span class="social-icon--snapchat"></span><span class="visuallyhidden">Snapchat</span></a>
  <a href="https://www.linkedin.com/company/ucla"><span class="social-icon--linkedin"></span><span class="visuallyhidden">Linked</span></a>
  <a href="https://www.youtube.com/user/UCLA"><span class="social-icon--youtube"></span><span class="visuallyhidden">Youtube</span></a>
  <a href="https://www.tiktok.com/@ucla"><span class="social-icon--tiktok"></span><span class="visuallyhidden">Tiktok</span></a>
</div>