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
  • Patrick De Young avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Kiri Hoy avatar picture
  • Alexander Sadleir avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent avatar picture
  • Hannah J. Nicdao avatar picture
  • Trevor Brennan 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://gold.designsystemau.org/assets/img/placeholder/157X80.png" alt="Placeholder image">
          <p><small>&copy; Commonwealth of Australia, <a href="https://github.com/designsystemau/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 '@gold.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://gold.designsystemau.org/assets/img/placeholder/157X80.png" alt="Placeholder image" />
            <p><small>&copy; Commonwealth of Australia, <a href="https://github.com/designsystemau/design-system-components/blob/master/LICENSE.md" rel="external license">MIT licensed</a></small></p>
          </AUfooterEnd>
        </div>
      </div>
    </div>
  </AUfooter>
</div>

Related components

Feedback