Social

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

<!-- Post Tiles -->
<h2 class="mt-24">Post Tiles</h2>
<!-- Without Media -->
<h3>Without Media</h3>
<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="../../icons/social/twitter--white.svg" alt="Twitter">
    </a>
</div>

<h3 class="mt-12">With Media</h3>
<!-- 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="../../icons/social/instagram--white.svg" alt="instagram">
    </a>
</div>