dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Footer

v3.0.4

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 @gov.au/footer
Tags
Requires
Contributors
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Petra Gulicher avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Simon Pascal Klein avatar picture
  • Alexander Sadleir avatar picture
  • Alex Page avatar picture

Default

The footer at the bottom of a page. Usually contains copyright information and links to other sections of the site.

Example

<!--
  Light:  <footer class="au-footer au-body">
  Dark:   <footer class="au-footer au-footer--dark au-body au-body--dark">
-->


<footer class="au-footer au-body" role="contentinfo">
  <div class="container">
    <nav class="au-footer__navigation row" aria-label="footer">
      <div class="col-md-3 col-sm-6">
        <h3 class="au-display-lg">Section</h3>
        <ul class="au-link-list">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6">
        <h3 class="au-display-lg">Section</h3>
        <ul class="au-link-list">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </div>
    </nav>
    <div class="row">
      <div class="col-sm-12">
        <div class="au-footer__end">
          <p>Footer text</p>
          <img class="au-responsive-media-img" src="https://designsystem.gov.au/assets/img/placeholder/157x80.png" alt="Brand image">
          <p><small>&copy; Commonwealth of Australia, <a href="https://github.com/govau/design-system-components/blob/master/LICENSE.md" rel="external license">MIT licensed</a></small></p>
        </div>
      </div>
    </div>
  </div>
</footer>

/*
  Light:  <AUfooter>
  Dark:   <AUfooter dark>
*/

import AUfooter, { AUfooterNav, AUfooterEnd } from '@gov.au/footer';

<div className="au-grid au-body">
  <AUfooter>
    <div className="container">
      <AUfooterNav>
        <div className="row">
          <div className="col-md-3 col-sm-6">
            <h3 className="au-display-lg">Section</h3>
            <ul className="au-link-list">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </div>
          <div className="col-md-3 col-sm-6">
            <h3 className="au-display-lg">Section</h3>
            <ul className="au-link-list">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </div>
        </div>
      </AUfooterNav>
      <div className="row">
        <div className="col-sm-12">
          <AUfooterEnd>
            <p>Footer text</p>
            <img className="au-responsive-media-img" src="https://designsystem.gov.au/assets/img/placeholder/157x80.png" alt="Brand image" />
            <p><small>&copy; Commonwealth of Australia, <a href="https://github.com/govau/design-system-components/blob/master/LICENSE.md" rel="external license">MIT licensed</a></small></p>
          </AUfooterEnd>
        </div>
      </div>
    </div>
  </AUfooter>
</div>

Related components

Feedback