Footer

v4.0.0

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.

Released

History
View changes
Install
npm i @gold.au/footer
Tags
Requires
Contributors
  • Alexander Sadleir avatar picture
  • Patrick De Young avatar picture
  • Kiri Hoy avatar picture
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Alex Page avatar picture

Border

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

In the 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.

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.

Related components

Feedback