Footers help users find what they need after scrolling to the bottom of a page. They provide supplementary information such as copyright, ABN details, contact information, links to other pages within the website, and email and social media links.
- View changes
- npm i @gold.au/footer
We’ve used a thick line style to delineate our footers from the body. This supports the ‘visual loudness’ practice we have implemented in the design system.
Aria role content info
footer element, we add a
role="contentinfo" to support older browsers and screen readers that do not expose the
footer as a landmark.
For example the screen reader does not provide support to the
footer element when using JAWS 14 and Internet explorer 9.
Spacing above footer
The footer does not add any spacing above it. The default behaviour is that your main content area will touch the footer.
If there was a
margin-top on the footer new issues would arise in relation to sections of the website now having a visible gap due to the margin.
Due to this we allow the developer to add the spacing above the
<footer> however they see fit. We recommend adding
padding-bottom to the
<main> element when it is the previous sibling of the footer.