Footer
A JSON version of the footer is included in snippets/layout.json
Content with a data-ucas-content attribute would need to be replaced with markup from the UCAS Content API.
Content with a data-ucas-content-optional attribute can be omitted.
<!-- START footer_complete component -->
<footer class="section footer section--footer" id="section--footer" data-generated-at="2023-12-11T12:00:27+00:00" data-designframework="4.15.1">
<!-- START footer component -->
<div class="wrapper-container">
<div class="wrapper wrapper--padding">
<nav class="footer__social-contact" aria-label="contact and social media links">
<div class="footer__contact-links" data-ucas-content="UcasContactLinks">
<a href="https://www.ucas.com/contact-us" class="contact-link" data-ucas-content="UcasFooterContactLink">Contact us</a>
<a href="https://www.ucas.com/search/frequently-asked-questions" class="contact-link" data-ucas-content="UcasFooterFAQLink">FAQs</a>
</div>
<div class="footer__icon-links" data-ucas-content="UcasFooterSocial">
<a href="https://www.tiktok.com/@ucas_online?lang=en" target="_blank" rel="noopener" class="icon-link">TikTok<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g id="tiktok" transform="translate(0 0)"> <circle class="cls-1" cx="12" cy="12" r="11.25" fill="#5e1d68"/> <path class="cls-2" d="M19 10.47a2.75 2.75 0 0 1-.4 0 4.39 4.39 0 0 1-3.66-1.93v6.58A4.92 4.92 0 0 1 10 20a4.86 4.86 0 1 1 0-9.72h.31v2.4a3 3 0 0 0-.31 0 2.48 2.48 0 1 0 0 5 2.58 2.58 0 0 0 2.64-2.45L12.63 4H15a4.31 4.31 0 0 0 4 3.81Z" fill="#fff"/> </g> </svg> </a>
<a href="https://www.instagram.com/ucas_online" target="_blank" rel="noopener" class="icon-link">Instagram<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"> <g id="instagram" transform="translate(0 0)"> <circle class="cls-1" cx="22" cy="22" r="21" /> <path class="cls-2" d="M22 16c1.1 0 2.1.3 3 .8s1.7 1.3 2.2 2.2c1.1 1.9 1.1 4.1 0 6-.5.9-1.3 1.7-2.2 2.2-1.9 1.1-4.1 1.1-6 0-.9-.5-1.7-1.3-2.2-2.2-1.1-1.9-1.1-4.1 0-6 .5-.9 1.3-1.7 2.2-2.2.9-.5 1.9-.8 3-.8zm0 10c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm8-10.5c0 .4-.2.8-.5 1.1-.3.3-.6.5-1 .4-.8 0-1.5-.7-1.5-1.5 0-.4.2-.8.4-1.1.6-.6 1.5-.6 2.1 0 .3.3.5.7.5 1.1zm3.9 1.5c0 1 .1 2.7.1 5s0 4-.1 5c0 .9-.2 1.8-.5 2.7-.6 1.8-2 3.2-3.8 3.8-.9.3-1.8.4-2.7.5H22c-2.3 0-4 0-5-.1-.9 0-1.8-.2-2.7-.5s-1.7-.8-2.3-1.4c-.7-.7-1.2-1.5-1.5-2.3-.3-.9-.4-1.8-.5-2.7v-5c0-2.3 0-4 .1-5 0-.9.2-1.8.5-2.7.6-1.8 2-3.2 3.8-3.8.9-.3 1.8-.4 2.7-.5 1-.1 2.7-.1 5-.1s4 0 5 .1c.9 0 1.8.2 2.7.5 1.8.6 3.2 2 3.8 3.8.1.9.3 1.8.3 2.7zm-2.4 12.2c.3-1 .4-1.9.4-2.9 0-.8.1-1.9.1-3.4v-1.7c0-1.5 0-2.6-.1-3.4 0-1-.2-2-.4-2.9-.4-1.1-1.3-1.9-2.3-2.3-1-.3-1.9-.4-2.9-.4-.8 0-1.9-.1-3.4-.1h-1.7c-1.4 0-2.6 0-3.4.1-1 0-2 .2-2.9.4-1.1.4-1.9 1.3-2.3 2.3-.3 1-.4 1.9-.4 2.9 0 .8-.1 1.9-.1 3.4v1.7c0 1.4 0 2.6.1 3.4 0 1 .2 2 .4 2.9.4 1.1 1.3 1.9 2.3 2.3 1 .3 1.9.4 2.9.4.8 0 1.9.1 3.4.1h1.7c1.5 0 2.6 0 3.4-.1 1 0 2-.2 2.9-.4 1-.4 1.9-1.3 2.3-2.3z" /> </g> </svg> </a>
<a href="https://www.youtube.com/user/UCASonline" target="_blank" rel="noopener" class="icon-link">YouTube<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"> <g id="youtube" transform="translate(0 0)"> <circle class="cls-1" cx="22" cy="22" r="21" /> <path d="M35.4 15.1c-.3-1.2-1.3-2.2-2.5-2.5C30.7 12 22 12 22 12s-8.8 0-11 .6c-1.2.3-2.1 1.3-2.5 2.5-.3 2.3-.5 4.6-.5 6.9s.2 4.6.6 6.9c.3 1.2 1.3 2.2 2.5 2.5 2.2.6 10.9.6 10.9.6s8.7-.1 10.9-.7c1.2-.3 2.1-1.3 2.5-2.5.4-2.3.6-4.6.6-6.9 0-2.2-.2-4.5-.6-6.8zM20 25.6v-8l7.4 4-7.4 4z"/> <path class="cls-2" d="M35.4 15.1c-.3-1.2-1.3-2.2-2.5-2.5C30.7 12 22 12 22 12s-8.8 0-11 .6c-1.2.3-2.1 1.3-2.5 2.5-.3 2.3-.5 4.6-.5 6.9s.2 4.6.6 6.9c.3 1.2 1.3 2.2 2.5 2.5 2.2.6 10.9.6 10.9.6s8.7-.1 10.9-.7c1.2-.3 2.1-1.3 2.5-2.5.4-2.3.6-4.6.6-6.9 0-2.2-.2-4.5-.6-6.8zM20 25.6v-8l7.4 4-7.4 4z"/> </g> </svg> </a>
<a href="https://www.linkedin.com/company/ucas" target="_blank" rel="noopener" class="icon-link">LinkedIn<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"> <g id="linked_in" transform="translate(0 0)"> <circle class="cls-1" cx="22" cy="22" r="21" /> <path id="Rectangle_336" class="cls-2" d="M11 18h5v15h-5V18z"/> <path id="Path_446" class="cls-2" d="M33 24.9V33h-5v-7.2c0-1.7.4-3.9-2-3.9s-3 1.9-3 3.8V33h-5V18h5v2.3c.9-1.5 2.8-2.4 4.5-2.4 4.6 0 5.5 3.1 5.5 7z"/> <path id="Path_447" class="cls-2" d="M16 13.5c0 1.4-1.1 2.5-2.5 2.5S11 14.9 11 13.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5z"/> </g> </svg> </a>
<a href="https://www.facebook.com/ucasonline" target="_blank" rel="noopener" class="icon-link">Facebook<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="menu__svg"> <g id="facebook" transform="translate(0 0)"> <circle class="cls-1" cx="22" cy="22" r="21" /> <path class="cls-2" d="M24 36V23h4.2l.8-5h-5v-2.9c0-1.4.5-2.4 2.5-2.4H29V8.2c-1.2-.1-2.5-.2-3.7-.2-3.7 0-6.3 2.3-6.3 6.6V18h-4v5h4v13h5z" fill="#fff"/> </g> </svg> </a>
<a href="https://www.twitter.com/UCAS_online" target="_blank" rel="noopener" class="icon-link">Twitter<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"> <g id="twitter" transform="translate(0 0)"> <circle class="cls-1" cx="22" cy="22" r="21" /> <path class="cls-2" d="M17.2 33c8.3 0 15.1-6.9 15.2-15.6v-.9c1-.8 1.9-1.8 2.7-2.9-1 .5-2 .7-3.1.9 1.1-.7 1.9-1.8 2.3-3.1-1 .6-2.2 1.1-3.4 1.3-2-2.2-5.4-2.4-7.5-.3-1.1 1.1-1.7 2.5-1.7 4.1 0 .4 0 .9.1 1.3-4.3-.2-8.3-2.3-11-5.8-1.4 2.5-.7 5.8 1.7 7.4-.8-.1-1.7-.3-2.4-.7v.1c0 2.6 1.8 4.9 4.3 5.4-.8.2-1.6.3-2.4.1.7 2.3 2.7 3.8 5 3.9-1.9 1.5-4.2 2.4-6.6 2.4-.4 0-.8 0-1.3-.1 2.3 1.6 5.2 2.5 8.1 2.5" /> </g> </svg> </a>
</div>
</nav>
<nav class="footer__page-links" aria-label="information links">
<div class="footer__links-group" data-ucas-content="UcasFooterLinksGroupOne">
<a href="https://www.ucas.com/advisers" data-ucas-content="UcasFooterAdviserLink">Advisers</a>
<a href="https://www.ucas.com/providers" data-ucas-content="UcasFooterProviderLink">Providers</a>
<a href="https://www.ucas.com/business" data-ucas-content="UcasFooterBusinessLink">Businesses</a>
<a href="https://www.ucas.com/business/employers" data-ucas-content="UcasFooterEmployerLink">Employers</a>
</div>
<div class="footer__links-group" data-ucas-content="UcasFooterLinksGroupTwo">
<a href="https://www.ucas.com/about-us" data-ucas-content="UcasFooterAboutLink">About us</a>
<a href="https://www.ucas.com/about-us/join-our-team" data-ucas-content="UcasFooterJoinLink">Join our team</a>
<a href="https://www.ucas.com/about-us/policies/accessibility" data-ucas-content="UcasFooterAccessibilityLink">Accessibility</a>
<a href="https://www.ucas.com/data-and-analysis" data-ucas-content="UcasFooterDataLink">Our data and analysis</a>
</div>
<div class="footer__links-group" data-ucas-content="UcasFooterLinksGroupThree">
<a href="https://www.ucas.com/ucas-terms-explained" data-ucas-content="UcasFooterGlossaryLink">Glossary</a>
<a href="https://www.ucas.com/about-us/policies/terms-and-conditions-use-ucas-network" data-ucas-content="UcasFooterTermsLink">Terms and conditions</a>
<a href="https://www.ucas.com/about-us/policies/privacy-policies-and-declarations" data-ucas-content="UcasFooterPrivacyLink">Privacy and cookies</a>
<a href="https://www.ucas.com/corporate/about-us/slavery-and-human-trafficking-statement-financial-year-ending-31-july-2017" data-ucas-content="UcasFooterSlaveryLink">Modern slavery statement</a>
</div>
</nav>
</div>
</div>
<div class="wrapper-container">
<div class="wrapper wrapper--padding">
<div class="footer__copyright" data-ucas-content="UcasFooterCopyright">
<a href="https://www.ucas.com"><img alt="UCAS" src="https://prod.df.ucascdn.com/4.15.1/images/logo.svg" /></a>
<p data-ucas-content="UcasCopyrightMessage">© UCAS 2023</p>
</div>
</div>
</div>
<!-- END footer component -->
</footer>
<!-- END footer_complete component -->
Content API fallback
If you are looking at this on a prod environment, the markup can be used as-is.