UCLA Component Library

Social: Default 

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

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