Patterns menu
Site footer
A site footer should appear at the bottom of every page and highlights links to content about the website.
About this pattern
A site footer should include:
- a list of links to items such as the privacy statement, cookie information and accessibility statement
- a copyright statement – for example, mygov.scot uses: “All content is available under the Open Government Licence v3.0, except for graphic assets and where otherwise stated. © Crown Copyright”
- an additional logo, if a parent or partner organisation’s logo is needed
Why we use this pattern
Site footers are a best practice web pattern used to add information about a website at the bottom of web pages.
HTML
< >
CSS
/* Footer
------------------------------------ */
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
.footer--bg {
color: #ffffff;
background: var(--scottish-teal);
border-top: 4px solid var(--verdant-green);
height: auto;
margin-top: 40px;
}
.social--links {
padding: 25px 0 0 0;
}
.social--links li {
list-style: none;
}
ul.footer--links-list {
margin: 0;
padding: 0;
}
.footer--links li {
list-style: none;
display: inline-block;
padding: 0 15px 0 0;
}
.footer--links-list li a {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}
.footer--links-list li a:hover {
color: #000000;
}
.footer--links-list li a:focus {
background-color: var(--verdant-green);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
.footer--bottom {
margin: 20px 0 20px 0;
border-top: 1px solid var(--grey-four);
}
.footer--copyright {
padding-top: 20px;
}
.footer--logo {
padding-top: 20px;
}
.footer--logo a:hover, .footer--logo a:focus {
background: none;
}
.social--icons {
color: #ffffff;
font-size: 1.5rem;
}
a.social--icons {
border: none;
}
.social--icons:hover {
color: var(--grey-three);
background: transparent;
}
.social--icons:focus {
background: transparent;
outline: 3px solid #ffffff;
color: #ffffff;
}
.footer--logo a {
border: none;
}