The footer supplement is a web banner that appears above the footer at the bottom of certain pages. The purpose of this banner is to provide the user with a link to the relevant page. For example the Academic life page this will link to the contacts page.

When to use

Must be used at the bottom of the page above the footer pattern.


  • Can pass any material design icon that is present in the uol-icon component
<a href="{{ link.url }}" class="footer-supplement">
  {% if link.icon %}<span class="footer-supplement__icon uol-icon uol-icon--icon-only uol-icon--mdi{{ link.icon }}"></span>{% endif %}
{{ link.text }}</a>
<a href="/academic-life-contacts-page" class="footer-supplement">
    <span class="footer-supplement__icon uol-icon uol-icon--icon-only uol-icon--mdiPhoneOutline"></span>
    Academic Life Contacts</a>
  • Content:
    .footer-supplement {
        @extend .uol-col-container;
        @extend %text-size-heading-5;
        @extend %uol-font-sans-serif;
        font-weight: $font-weight-bold--sans-serif;
        background-color: $color-black--faded;
        color: $color-font;
        text-decoration: none;
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: $spacing-4;
        &:focus {
            text-decoration: underline;
            text-decoration-color: $color-brand;
            text-decoration-thickness: 1.5px;
        .footer-supplement__icon {
            height: 25px;
            width: 25px;
            margin-right: $spacing-2;
            svg {
                width: 100% !important;
                height: 100% !important;
  • URL: /components/raw/uol-footer-supplement/_footer-supplement.scss
  • Filesystem Path: src/library/02-components/footer-supplement/_footer-supplement.scss
  • Size: 744 Bytes
  • Handle: @uol-footer-supplement
  • Preview:
  • Filesystem Path: src/library/02-components/footer-supplement/footer-supplement.njk
  "link": {
    "url": "/academic-life-contacts-page",
    "text": "Academic Life Contacts",
    "icon": "PhoneOutline"