University of Leeds Design System v1.0.15

Footer: Additional links

No notes defined.

<footer class="uol-site-footer-outer">
  <div class="uol-site-footer uol-content-container">
    <div class="uol-site-footer__nav-container">
      <nav class="uol-site-footer__nav-outer" aria-labelledby="footer-nav-title">
        <h2 class="uol-site-footer__title" id="footer-nav-title">Footer navigation</h2>
        {% for link_group in footer_link_groups %}
          <div class="uol-site-footer__nav">
              {% render '@uol-nav-list-group', {link_group: link_group, link_group_heading_tag: 'h3'} %}
          </div>
        {% endfor %}
      </nav>
    </div>
    <div class="uol-site-footer__address-container ">

        {% render '@uol-footer-contact', {organisation: organisation} %}

        {% render '@uol-footer-social-media', {social_links: social_links} %}

    </div>

    {% if accreditations %}
      <div class="uol-site-footer__accreditations">
        {% render '@uol-accreditation-logos', { accreditations: accreditations } %}
      </div>
    {% endif %}

    <div class="uol-site-footer__site-information-container">
      {% render '@uol-footer-site-information', { siteInformation: siteInformation }%}
    </div>

    <div class="uol-site-footer__logo-outer">
      <a href="https://leeds.ac.uk" class="uol-site-footer__logo" aria-label="University of Leeds">
        {% render '@uol-logo-uol' %}
      </a>
    </div>
  </div>
</footer>
 
<footer class="uol-site-footer-outer">
    <div class="uol-site-footer uol-content-container">
        <div class="uol-site-footer__nav-container">
            <nav class="uol-site-footer__nav-outer" aria-labelledby="footer-nav-title">
                <h2 class="uol-site-footer__title" id="footer-nav-title">Footer navigation</h2>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="Study and Courses">
                        <h3 class="nav-list-group__title">Study and Courses</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-link-undergraduate" class="nav-list-group__link">Undergraduate</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-link-masters-courses" class="nav-list-group__link">Masters courses</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-link-very-long-title" class="nav-list-group__link">Research degrees with very long titles that wrap over two lines like this one its very very long</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-international" class="nav-list-group__link">International</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-course-search" class="nav-list-group__link">Course search</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="About us">
                        <h3 class="nav-list-group__title">About us</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-campus-map" class="nav-list-group__link">Campus map</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-heritage" class="nav-list-group__link">Our heritage</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-faculties" class="nav-list-group__link">Faculties</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-governance" class="nav-list-group__link">Governance</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-values" class="nav-list-group__link">Values and responsibility</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-equality" class="nav-list-group__link">Equality</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-executive" class="nav-list-group__link">Executive team</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-news" class="nav-list-group__link">News</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-events" class="nav-list-group__link">Events</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="Quicklinks and contacts">
                        <h3 class="nav-list-group__title">Quicklinks and contacts</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-jobs" class="nav-list-group__link">Jobs</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-term-dates" class="nav-list-group__link">Term dates</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-services-a-z" class="nav-list-group__link">Services A-Z</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-library" class="nav-list-group__link">Library</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-alumni" class="nav-list-group__link">Alumni</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-press" class="nav-list-group__link">Press</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-video-leeds" class="nav-list-group__link">VideoLeeds</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-staff-a-z" class="nav-list-group__link">Staff A-Z</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-contacts" class="nav-list-group__link">Contacts</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-coronavirus" class="nav-list-group__link">Coronavirus</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="For Students">
                        <h3 class="nav-list-group__title">For Students</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="http://students.leeds.ac.uk/" class="nav-list-group__link">For Students</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="https://minerva.leeds.ac.uk/" class="nav-list-group__link">Minerva</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="Useful links">
                        <h3 class="nav-list-group__title">Useful links</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="http://alumni.leeds.ac.uk/" class="nav-list-group__link">Alumni</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="http://www.leeds.ac.uk/campusmap" class="nav-list-group__link">Campus map</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="http://www.leeds.ac.uk/info/5000/about/131/find_us" class="nav-list-group__link">Find us</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="http://www.leeds.ac.uk/homepage/17/academic_year" class="nav-list-group__link">Term dates</a>
                            </li>

                        </ul>
                    </nav>

                </div>

            </nav>
        </div>
        <div class="uol-site-footer__address-container ">

            <h2 class="uol-footer-contact__title">Contact information</h2>
            <address class="uol-footer-contact" vocab="https://schema.org/" typeof="Organization">
                <strong class="uol-footer-contact__name" property="name">University of Leeds</strong>

                <div class="uol-footer-contact__address" property="address" typeof="PostalAddress">

                    <div property="streetAddress">
                        <span class="uol-footer-contact__address__item">Woodhouse Lane</span>

                    </div>

                    <span class="uol-footer-contact__address__item" property="addressLocality">Leeds</span>
                    <span class="uol-footer-contact__address__item" property="addressRegion">West Yorkshire</span>
                    <span class="uol-footer-contact__address__item" property="postalCode">LS2 9JT</span>
                    <span class="uol-footer-contact__address__item" property="addressCountry">United Kingdom</span>
                </div>

                <dl class="uol-footer-contact__telephone-email-container">

                    <dt class="uol-footer-contact__telephone-email-label">Telephone</dt>
                    <dd class="uol-footer-contact__telephone-email-data">
                        <a class="uol-footer-contact__telephone" href="tel:+4401132431751" property="telephone">+44 0113 243 1751</a>
                    </dd>

                </dl>

            </address>

            <div class="uol-footer-social-media">

                <a class="uol-footer-social-media__item" href="https://youtube-nocookie.com/user/universityofleedsuk" aria-label="YouTube">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M9.6 17.25V6.45l7.2 5.4m4.8-9.12c-.72-.24-5.16-.48-9.6-.48l-9.6.456C.528 3.33 0 7.53 0 11.85c0 4.308.528 8.52 2.4 9.132.72.24 5.16.468 9.6.468l9.6-.468c1.872-.612 2.4-4.824 2.4-9.132 0-4.32-.528-8.508-2.4-9.12z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://twitter.com/UniversityLeeds" aria-label="Twitter">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill-rule="nonzero" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://instagram.com/universityofleeds/?hl=en" aria-label="Instagram">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M6.96 0h10.08C20.88 0 24 3.12 24 6.96v10.08A6.96 6.96 0 0 1 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96A6.96 6.96 0 0 1 6.96 0m-.24 2.4A4.32 4.32 0 0 0 2.4 6.72v10.56a4.32 4.32 0 0 0 4.32 4.32h10.56a4.32 4.32 0 0 0 4.32-4.32V6.72a4.32 4.32 0 0 0-4.32-4.32H6.72M18.3 4.2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3M12 6a6 6 0 1 1 0 12 6 6 0 1 1 0-12m0 2.4a3.6 3.6 0 0 0 0 7.2 3.6 3.6 0 0 0 0-7.2z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.linkedin.com/school/7244" aria-label="LinkedIn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M24 24h-5.333v-9c0-1.413-1.587-2.587-3-2.587S13.333 13.587 13.333 15v9H8V8h5.333v2.667C14.213 9.24 16.48 8.32 18 8.32c3.333 0 6 2.72 6 6.013V24M5.333 24H0V8h5.333v16M2.667 0C4.14 0 5.333 1.194 5.333 2.667S4.14 5.333 2.667 5.333 0 4.14 0 2.667 1.194 0 2.667 0z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.facebook.com/universityofleeds/" aria-label="Facebook">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M18 0h0v4.8h-2.4c-.828 0-1.2.972-1.2 1.8v3H18v4.8h-3.6V24H9.6v-9.6H6V9.6h3.6V4.8A4.8 4.8 0 0 1 14.4 0H18z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://medium.com/university-of-leeds" aria-label="Medium">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="evenodd" d="M24 1.5h-6.687l-4.757 13.348L7.15 1.5H.005v.663l2.517 3.43-.034 13.245L0 22.623l.005.627h7.027l.018-.577-2.944-3.836.078-10.72 6.207 15.132h.75l5.513-15.5v12.6l-2.26 2.383v.508H24v-.61l-2.202-2.328-.03-16.02L24 2.167V1.5z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.weibo.com/leedsuniversityuk" aria-label="Weibo">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M10.9 20.894c-3.74.39-6.968-1.394-7.2-3.984s2.593-5.006 6.33-5.396 6.968 1.393 7.2 3.982-2.592 5.008-6.33 5.398m7.48-8.6c-.318-.1-.536-.17-.37-.6.36-.957.398-1.784.007-2.374-.733-1.105-2.74-1.046-5.04-.03 0-.001-.722.334-.537-.27.354-1.2.3-2.205-.25-2.786-1.247-1.318-4.566.05-7.41 3.05-2.13 2.25-3.368 4.633-3.368 6.694 0 3.942 4.79 6.338 9.477 6.338 6.143 0 10.23-3.766 10.23-6.756 0-1.807-1.442-2.832-2.738-3.256m4.08-7.213c-1.483-1.735-3.672-2.396-5.69-1.944h-.001c-.467.105-.765.59-.664 1.082s.56.807 1.026.702c1.437-.322 2.992.15 4.047 1.38s1.34 2.914.888 4.39v.001c-.147.48.102.994.557 1.15s.94-.107 1.09-.586c.633-2.08.233-4.44-1.25-6.175"></path>
                        <path d="M19.74 7.668c-.7-.766-1.738-1.057-2.693-.857a.71.71 0 0 0-.556.846c.084.383.468.63.858.546v.001a1.4 1.4 0 0 1 1.318.418c.343.374.435.886.288 1.333h.001a.71.71 0 0 0 .465.896c.38.12.788-.085.91-.46a2.75 2.75 0 0 0-.592-2.724m-8.817 8.113a.53.53 0 0 1-.628.228c-.217-.087-.284-.327-.162-.537s.397-.31.613-.227c.22.08.3.32.177.536m-1.158 1.463c-.35.552-1.104.794-1.67.54-.56-.25-.723-.892-.372-1.43S8.8 15.578 9.36 15.8c.57.24.752.876.406 1.433m1.32-3.905c-1.73-.443-3.684.405-4.434 1.904-.765 1.53-.026 3.226 1.72 3.782 1.8.574 3.942-.306 4.684-1.957.732-1.614-.18-3.275-1.97-3.73"></path>
                    </svg>

                </a>

            </div>

        </div>

        <div class="uol-site-footer__site-information-container">

            <nav class="footer-site-information" aria-label="Site information">
                <h2 class="hide-accessible">Site information</h2>
                <ul class="footer-site-information__list">
                    <li class="footer-site-information__item">&copy; 2024 University of Leeds</li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/terms-and-conditions">Terms and conditions</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/accessibility">Accessibility</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/privacy">Privacy and cookies</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/freedom-of-information">Freedom of information</a></li>

                </ul>
            </nav>

        </div>

        <div class="uol-site-footer__logo-outer">
            <a href="https://leeds.ac.uk" class="uol-site-footer__logo" aria-label="University of Leeds">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 80.79" fill="#000000" focusable="false" aria-hidden="true">
                    <path fill-rule="evenodd" d="M268.9 17.85h.7v-.65h-1.12v1.93h.43zm-2.05 0h.67v-.65h-1.12v1.93h.45zM230.44 0v51.7h27.1V36.15h4.62V51.7h.64v-17h8.42v17h.57V36.15h4.63V51.7h6.2V0zm36.53 8.75l4.63 2.8h-9.24zm-4.65 3.33h9.3l.5 3.4h-10.24zM275.4 35.6h-3.62v-1.47h-9.63v1.47h-3.6v-3.25h.65V21.62h1v-5.57h13.54v5.57h1v10.74h.62zm-6.17-3.25h.76v-7.12h1.7v-1.28h-2.5zm-7.8-9.6h11.12l.54-.7h-12.13zm4.3 9.6h.77v-7.12h1.7v-1.28h-2.48zm-.93-14.5h.68v-.65h-1.12v1.93h.44zm-2.57 14.5h.77v-7.12h1.68v-1.28h-2.5zM267 36.9a2.35 2.35 0 1 0 1.662.688A2.35 2.35 0 0 0 267 36.91zm0 4.18a1.84 1.84 0 1 1 1.83-1.83 1.82 1.82 0 0 1-1.83 1.83zM16.4 73.1V61.5h-3.94v11.86a4.08 4.08 0 0 1-1 2.93 4.19 4.19 0 0 1-3.31 1.2 4.14 4.14 0 0 1-3.18-1.2 4.45 4.45 0 0 1-1.08-3.11V61.5H-.04v12a7.24 7.24 0 0 0 1.87 5.33c1.37 1.33 3.44 2 6.24 2s4.94-.78 6.36-2.2a7.62 7.62 0 0 0 1.92-5.51z"></path>
                    <path d="M39.17 80.5v-19h-3.93v9.7l.06 2.95h-.06l-1.8-2.5-8-10.15h-4v19h3.94V70.1l-.07-2.64h.07l1.8 2.5 8.26 10.56z"></path>
                    <path d="M48.47 80.5v-19H44.5v19h3.97zm21.13-19h-4l-4.3 10.22-1.27 3.4H60l-1.3-3.52-3.87-10.1H50.5l7.8 19.15h2.94l8.4-19.15zm13.3 19v-3.24h-7.06V72.4h6.06v-3.26h-6.06v-4.43h6.04l1.04-3.23H71.88v19h11z"></path>
                    <path fill-rule="evenodd" d="M101.88 80.5c-2.86-4.85-4.7-8.06-5.67-8.6h0a5.4 5.4 0 0 0 3.46-4.91c0-2.94-1.83-5.45-6.9-5.45H87.2v19h4v-7.38h1.4c.7.27 1.84 2.4 4.73 7.35zm-6.13-13.15a2.83 2.83 0 0 1-2.91 2.89h-1.67v-5.47h1.67c1.87 0 2.9 1.12 2.9 2.58z"></path>
                    <path d="M115.72 75.15c0-6-8.18-5.67-8.18-9 0-1.1 1.1-1.73 2.5-1.73a9.33 9.33 0 0 1 4.54 1.39l.06-3.42a9.84 9.84 0 0 0-4.79-1.15c-4.2 0-6.47 2.53-6.47 5.43a5 5 0 0 0 1.2 3.38c2.33 2.63 6.94 3.06 6.94 5.58 0 1.44-1.54 1.95-2.95 1.95a7.9 7.9 0 0 1-4.36-1.47l-1.53 2.86a10.71 10.71 0 0 0 6.06 1.79c3.9 0 7-2.16 7-5.64zm7.16 5.35v-19h-3.95v19h3.95zm18.34-19h-15.56v3.23h5.57V80.5h4V64.73h5.1l.9-3.23zm17.38 0h-4.13l-2.9 5.36-1.37 2.68h-.05l-1.4-2.73-2.9-5.3h-4.36L148.1 73v7.53h3.95v-7.47l6.58-11.54z"></path>
                    <path d="M185.96 70.97a9.15 9.15 0 0 0-9.83-9.7 9.64 9.64 0 0 0-7.07 2.83 10 10 0 0 0-2.75 7.11 9.53 9.53 0 0 0 3 7.27 10.78 10.78 0 0 0 13.95-.52 9.78 9.78 0 0 0 2.66-7zm-4.2.1c0 4.17-2.4 6.55-5.64 6.55s-5.7-2.38-5.7-6.55 2.4-6.55 5.7-6.55 5.64 2.45 5.64 6.55z"></path>
                    <path fill-rule="evenodd" d="M200.68 61.5h-11.06v19h3.97v-8.03h6v-3.24h-6v-4.5h6.08l1-3.23zm20.22 19v-3.26h-6.68v-15.7h-3.92V80.5h10.6zm13.57 0v-3.23h-7.03v-4.84h6.04v-3.25h-6.04v-4.42h6l1.05-3.2h-11V80.5h10.98zm14.4 0v-3.23h-7.03v-4.84h6.05v-3.25h-6.05v-4.42h6.02l1.02-3.2h-11V80.5h10.98z"></path>
                    <path fill-rule="evenodd" d="M269.17 70.85c0-5.66-3.8-9.3-10.57-9.3h-6.3V80.5h6c6.58 0 10.92-3.8 10.92-9.64zm-4.23.1c0 3.32-1.84 6.27-6.53 6.27h-2.17V64.8h2.1c4.35 0 6.6 2.42 6.6 6.15z"></path>
                    <path d="M283.47 75.16c0-6-8.16-5.68-8.16-8.95 0-1.1 1.1-1.74 2.5-1.74a9.41 9.41 0 0 1 4.52 1.38v-3.4a9.75 9.75 0 0 0-4.79-1.15c-4.17 0-6.45 2.54-6.45 5.4a5 5 0 0 0 1.22 3.38c2.3 2.62 6.9 3 6.9 5.56 0 1.44-1.56 1.95-2.94 1.95a7.76 7.76 0 0 1-4.34-1.47l-1.53 2.85a10.65 10.65 0 0 0 6.05 1.79c3.9 0 6.95-2.16 6.95-5.6z"></path>
                </svg>

            </a>
        </div>
    </div>
</footer>
  • Content: 
    .uol-site-footer-outer {
  background-color: $color-black;
}

.uol-site-footer {
  @extend .uol-col-container;

  display: block;
  color: $color-white--dark;
  overflow: auto;

  > * {
    float: left;
  }

  a {
    transition: color 0.3s ease;

    &:hover,
    &:focus {
      color: $color-brand--bright;
      text-decoration: underline;
    }

    &[aria-current] {
      color: $color-brand--bright;
    }
  }
}

  .uol-site-footer__title {
    @extend .hide-accessible;
  }

  .uol-site-footer__nav-container {
    @extend .uol-col;
    @extend .uol-col-s-6;
    @extend .uol-col-l-8;
    @extend .uol-col-xl-9;

    .uol-site-footer__nav-outer {
      @extend .uol-col-container;

      @include media(">=uol-media-xs") {
        margin: -#{$col-gutter-s};
      }

      @include media(">=uol-media-l") {
        margin: -#{$col-gutter-l};
      }

      @include media(">=uol-media-xl") {
        margin: -#{$col-gutter-xl};
      }
    }

    .uol-site-footer__nav {
        @extend .uol-col;
        @extend .uol-col-l-6;
        @extend .uol-col-xl-4;
     }
  }

  .uol-site-footer__address-container {
    @extend .uol-col;
    @extend .uol-col-s-6;
    @extend .uol-col-l-4;
    @extend .uol-col-xl-3;

    align-self: flex-start;
  }

  .uol-site-footer__accreditations {
    @extend .uol-col;
    @extend .uol-col-s-6;
    @extend .uol-col-l-12;
    margin: $spacing-4 0.5rem;
    width: calc(100% - 1rem) !important;

    @include media(">=uol-media-s", "<uol-media-m") {
      width: 16.5rem;
    }

    @include media(">=uol-media-l") {
      width: 49.5rem;
      margin: 0;
    }

    @include media(">=uol-media-xl") {
      margin-top: $spacing-2;
    }
    @include media(">=uol-media-s", "<uol-media-m") {
      width: 16.5rem;
    }

    @include media(">=uol-media-l") {
      width: 49.5rem;
      margin: 0;
    }

    @include media(">=uol-media-xl") {
      margin-top: $spacing-2;
    }

    @include media(">=uol-media-l") {
      height: auto;
    }
  }

  .uol-site-footer__site-information-container {
    @extend .uol-col;
    @extend .uol-col-m-7;
    @extend .uol-col-xl-8;

    position: relative;

    @include media(">=uol-media-m") {
      min-height: 5.25rem;
    }

    @include media(">=uol-media-l") {
      min-height: 6.25rem;
    }

    .footer-site-information__list {
      margin-bottom: $spacing-6;

      @include media(">=uol-media-m") {
        position: absolute;
        margin: 0;
        bottom: #{$col-gutter-s / 2};
        left: #{$col-gutter-s / 2};
        right: #{$col-gutter-s / 2};
      }

      @include media(">=uol-media-l") {
        bottom: #{$col-gutter-l / 2};
        left: #{$col-gutter-l / 2};
        right: #{$col-gutter-l / 2};
      }

      @include media(">=uol-media-xl") {
        bottom: #{$col-gutter-xl / 2};
        left: #{$col-gutter-xl / 2};
        right: #{$col-gutter-xl / 2};
      }
    }
  }

  .uol-site-footer__logo-outer {
    @extend .uol-col;
    @extend .uol-col-m-5;
    @extend .uol-col-xl-4;
  }

  .uol-site-footer__logo {
    display: block;
    width: 272px;
    max-width: 100%;
    float: right;

    @include media(">=uol-media-l") {
      width: 327px;
    }

    svg {
      width: 272px;
      height: 78.77px;

      @include media(">=uol-media-l") {
        width: 327px;
        height: 94.7px;
      }

      path {
        fill: $color-white--dark;
        transition: fill 0.3s ease;
      }
    }
  }

  // Here we are overriding width of 100% which comes from columns css
  // The padding required means we need to apply a negative margin to not get horizontal scrolling
  // The reduced width here accounts for the padding without a negatve margin 
  
  .uol-site-footer__address-container,
  .uol-site-footer__site-information-container,
  .uol-site-footer__logo-outer {
    width: calc(100% - 2 * #{$spacing-2}) !important;
    padding: 0 $spacing-2;
  }
  • URL: /components/raw/uol-site-footer/_footer.scss
  • Filesystem Path: src/library/03-patterns/footer/_footer.scss
  • Size: 3.9 KB 
{
  "footer_link_groups": [
    {
      "group_title": "Study and Courses",
      "links": [
        {
          "title": "Undergraduate",
          "url": "/footer-link-undergraduate"
        },
        {
          "title": "Masters courses",
          "url": "/footer-link-masters-courses"
        },
        {
          "title": "Research degrees with very long titles that wrap over two lines like this one its very very long",
          "url": "/footer-link-very-long-title"
        },
        {
          "title": "International",
          "url": "/footer-international"
        },
        {
          "title": "Course search",
          "url": "/footer-course-search"
        }
      ]
    },
    {
      "group_title": "About us",
      "links": [
        {
          "title": "Campus map",
          "url": "/footer-campus-map"
        },
        {
          "title": "Our heritage",
          "url": "/footer-heritage"
        },
        {
          "title": "Faculties",
          "url": "/footer-faculties"
        },
        {
          "title": "Governance",
          "url": "/footer-governance"
        },
        {
          "title": "Values and responsibility",
          "url": "/footer-values"
        },
        {
          "title": "Equality",
          "url": "/footer-equality"
        },
        {
          "title": "Executive team",
          "url": "/footer-executive"
        },
        {
          "title": "News",
          "url": "/footer-news"
        },
        {
          "title": "Events",
          "url": "/footer-events"
        }
      ]
    },
    {
      "group_title": "Quicklinks and contacts",
      "links": [
        {
          "title": "Jobs",
          "url": "/footer-jobs"
        },
        {
          "title": "Term dates",
          "url": "/footer-term-dates"
        },
        {
          "title": "Services A-Z",
          "url": "/footer-services-a-z"
        },
        {
          "title": "Library",
          "url": "/footer-library"
        },
        {
          "title": "Alumni",
          "url": "/footer-alumni"
        },
        {
          "title": "Press",
          "url": "/footer-press"
        },
        {
          "title": "VideoLeeds",
          "url": "/footer-video-leeds"
        },
        {
          "title": "Staff A-Z",
          "url": "/footer-staff-a-z"
        },
        {
          "title": "Contacts",
          "url": "/footer-contacts"
        },
        {
          "title": "Coronavirus",
          "url": "/footer-coronavirus"
        }
      ]
    },
    {
      "group_title": "For Students",
      "links": [
        {
          "title": "For Students",
          "url": "http://students.leeds.ac.uk/"
        },
        {
          "title": "Minerva",
          "url": "https://minerva.leeds.ac.uk/"
        }
      ]
    },
    {
      "group_title": "Useful links",
      "links": [
        {
          "title": "Alumni",
          "url": "http://alumni.leeds.ac.uk/"
        },
        {
          "title": "Campus map",
          "url": "http://www.leeds.ac.uk/campusmap"
        },
        {
          "title": "Find us",
          "url": "http://www.leeds.ac.uk/info/5000/about/131/find_us"
        },
        {
          "title": "Term dates",
          "url": "http://www.leeds.ac.uk/homepage/17/academic_year"
        }
      ]
    }
  ],
  "organisation": {
    "name": "University of Leeds",
    "address": {
      "street": "Woodhouse Lane",
      "locality": "Leeds",
      "region": "West Yorkshire",
      "postalCode": "LS2 9JT",
      "country": "United Kingdom"
    },
    "telephone": "+44 0113 243 1751"
  },
  "siteInformation": {
    "currentYear": 2024,
    "links": [
      {
        "url": "/terms-and-conditions",
        "text": "Terms and conditions"
      },
      {
        "url": "/accessibility",
        "text": "Accessibility"
      },
      {
        "url": "/privacy",
        "text": "Privacy and cookies"
      },
      {
        "url": "/freedom-of-information",
        "text": "Freedom of information"
      }
    ]
  },
  "social_links": [
    {
      "title": "YouTube",
      "label": "youtube",
      "url": "https://youtube-nocookie.com/user/universityofleedsuk"
    },
    {
      "title": "Twitter",
      "label": "twitter",
      "url": "https://twitter.com/UniversityLeeds"
    },
    {
      "title": "Instagram",
      "label": "instagram",
      "url": "https://instagram.com/universityofleeds/?hl=en"
    },
    {
      "title": "LinkedIn",
      "label": "linkedin",
      "url": "https://www.linkedin.com/school/7244"
    },
    {
      "title": "Facebook",
      "label": "facebook",
      "url": "https://www.facebook.com/universityofleeds/"
    },
    {
      "title": "Medium",
      "label": "medium",
      "url": "https://medium.com/university-of-leeds"
    },
    {
      "title": "Weibo",
      "label": "weibo",
      "url": "https://www.weibo.com/leedsuniversityuk"
    }
  ]
}