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.
Must be used at the bottom of the page above the footer pattern.
<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>
.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;
&:hover,
&: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;
}
}
}
{
"link": {
"url": "/academic-life-contacts-page",
"text": "Academic Life Contacts",
"icon": "PhoneOutline"
}
}