The Australian Government coat of Arms

Communities of practice

Communities of practice

Footer


#1

Please provide any feedback for the Footer component.

You can also view the component page on our documentation site for the Footer component.


#2

Example markup in the footer might benefit from semantic use of rel="license":

<div class="au-body">
  <footer class="au-footer" role="contentinfo">
    <nav class="au-footer__navigation">
      <p><a href="#">Link</a></p>
    </nav>

    <section class="au-footer__end">
      <p>Copyright information summary with link to detail of <a href="copyright.html" rel="license">licence</a>.</p>
    </section>
  </footer>
</div>

#3

Hi all!

Just a quick note to let everyone know we’ve updated the visual and code examples for the footer.

The updates include a placeholder for a brand image and examples for how to include a variety of navigation links.

If you want to check out the latest version, head over to the component page on the design system documentation site.


#4

Hi there,

A workmate of mine has just noticed that when I’ve implemented the footer component (following on from the “main” section & its contents), there is no margin between the end of the main content and the footer. I have inspected this, and found that the au-footer CSS (with a margin-top:30px) is being overruled by CSS further down the file that is au-body margin:0.

Inspecting the DTA.gov.au website and this Design Systems website I can see there is visual separation due to margins added by different things – but not from the au-footer CSS rule.
(DTA.gov.au add it to the “back to top” link; Design Systems has added another div around the “main” content, with a class of “tier” in order to add the padding between “main” and “footer”.

For the mean time, in my site’s code, I am adding an !important to the footer CSS, but thought I would flag this incase redefining the au-footer & au-body margin’s in various components is worthwhile?

(Note: I use the CSS from the “downloads” page, not npm. My download & CSS file is compiled with all the components, since I am setting up a demo of all the components.)


#5

Hi @emily thanks for noticing this. We need to do a better job explaining how we recommend adding spacing to elements like the footer.

On our test website ( the vanilla auds ), you can see there is no spacing added to the footer:
https://auds.service.gov.au/packages/footer/tests/site/

This is because by default we do not know how people are going to layout their pages. If we were to add a margin top we could potentially add a gap with a users background colour in the main content area.

Due to this we allow the developers to add their own spacing. Sometimes padding on the main content element before the footer or margin top on the footer can be the correct solution, however it is up to your implementation.

This is a great example of a problem that the design system can not fix as it will be different for many users. We will add some additional guidance for this situation on the website, I have opened a new issue:


#6

@emily we have updated our documentation to consider the above issue you have described.

Thank you for your help, we really appreciate your time!