Social

Usage

Usability Guidance

Follow 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 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.

Anatomy

Social Post Tiles Anatomy Image
  1. Post Text (required)
  2. Handle and Time Stamp (required)
  3. Social Channel Icon (required)
  4. Container (required)
  5. Photo (optional)
  6. Overlay (required for social posts with images only)

States

Social Post Tiles States Image

With Photo States

Social Post Tiles with Photo States Image

Specs

Social Post Tiles Specs Image

With Photo Specs

Social Post Tiles with Photo Specs Image

Code

<!-- Social Media Post Tiles -->
<div class="social-tile-container">
  <!-- Twitter -->
  <div class="social-tile">
    <a class="social-tile__twitter" href="http://twitter.com/UCLA">
      <p class="social-tile__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
      <div class="social-tile__info">
        <span class="social-tile__handle">@UCLA</span>
        <span class="social-tile__timestamp">5 hours ago</span>
      </div>
    </a>
  </div>
  <!-- Instagram -->
  <div class="social-tile">
    <a href="https://www.instagram.com/ucla" class="social-tile__instagram">
      <img class="social-tile__photo" src="/img/example-post.jpg" alt="Student walking on campus after rain.">
      <p class="social-tile__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
      <div class="social-tile__info">
        <span class="social-tile__handle">@UCLA</span>
        <span class="social-tile__timestamp">1 day ago</span>
      </div>
    </a>
  </div>
</div>

Anatomy

Social Links Anatomy Image
  1. Social Media Icon (required)
  2. Container (required)

States

Social Links States Image

Specs

Social Links Specs Image

Code

<!-- Social Media Links (White BG) -->
<div class="social-links-container">
  <a href="https://www.facebook.com/UCLA/"><svg class="social-icon--facebook"></svg></a>
  <a href="https://twitter.com/ucla"><svg class="social-icon--twitter"></svg></a>
  <a href="https://www.instagram.com/ucla/"><svg class="social-icon--instagram"></svg></a>
  <a href="https://www.snapchat.com/add/uclaofficial"><svg class="social-icon--snapchat"></svg></a>
  <a href="https://www.linkedin.com/company/ucla"><svg class="social-icon--linkedin"></svg></a>
  <a href="https://www.youtube.com/user/UCLA"><svg class="social-icon--youtube"></svg></a>
  <a href="https://www.tiktok.com/@ucla"><svg class="social-icon--tiktok"></svg></a>
</div>

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