UCLA Component Library

Footer: Department 

<footer id="footer" role="contentinfo" class="footer">
    <div class="footer__dept">

        <img class="footer__dept--logo" src="/img/examples/footer-stratcomm-logo.svg" alt="Strategic Communications Logo">

        <div class="footer__dept--info">
            <address class="footer__dept--contact">
                <p>10889 Wilshire Blvd., Suite 1400</p>
                <p>Los Angeles, CA 90024</p>
                <p>(626) 123-4567</p>
                <p><a href="mailto:contact@stratcomm.ucla.edu" class="white-link">contact@stratcomm.ucla.edu</a></p>
            </address>
            <div class="footer__dept--social">
                <a href="#"><svg class="footer__dept--social-facebook"></svg></a>
                <a href="#"><svg class="footer__dept--social-twitter"></svg></a>
                <a href="#"><svg class="footer__dept--social-instagram"></svg></a>
                <a href="#"><svg class="footer__dept--social-snapchat"></svg></a>
                <a href="#"><svg class="footer__dept--social-linkedin"></svg></a>
                <a href="#"><svg class="footer__dept--social-youtube"></svg></a>
                <a href="#"><svg class="footer__dept--social-tiktok"></svg></a>
            </div>
        </div>

        <nav class="footer__dept--links">
            <div class="footer__dept--links-wrapper">
                <ul>
                    <li>Heading</li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
                <ul>
                    <li>Heading</li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
            </div>
            <div class="footer__dept--links-wrapper">
                <ul>
                    <li>Heading</li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
                <ul>
                    <li>Heading</li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
            </div>
            <div class="footer__dept--links-wrapper">
                <ul>
                    <li>Heading</li>
                    <li><a href="#">A Link</a></li>
                    <li><a href="#">A Link</a></li>
                </ul>
            </div>
        </nav>
    </div>
</footer>