UCLA Component Library

Social 

<!-- 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>

<!-- Without Media -->
<div class="social-tile">
    <a class="social-tile__link" 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>
        <img class="social-tile__logo" src="https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--white.svg" alt="Twitter">
    </a>
</div>

<!-- Has Media -->
<div class="social-tile">
    <a class="social-tile__link has-media" href="https://www.instagram.com/ucla">
        <img class="social-tile__media" 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>
        <img class="social-tile__logo" src="https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--white.svg" alt="instagram">
    </a>
</div>