skip to content

Footer

Use the Footer component to add quick links, company, and contact information to the foot of a page.

A basic footer looks something like the following (as seen in the page layout demo. All the ds-footer class does is add some padding, the blue top border, and extend the Dark theme.

Aside from that, only ds-copyright is unique to this component. The content of the footer can be constructed from other components according to your needs. In the following example, a list of “quick links” is provided alongside the copyright.

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Markup

The unique class names for this component are the containing ds-footer and ds-copyright. Everything else, including the dark theme, the “clustered” navigation and the center alignment is achieved with other component helpers and utilities.

<footer class="ds-footer">
  <div class="ds-block-centered ds-text-centered ds-stack">
    <div class="ds-cluster-center">
      <ul>
        <!-- list items -->
      </ul>
    </div>
    <div class="ds-copyright">
      <a class="ds-logo" href="https://democracyclub.org.uk/">
        <img src="https://DemocracyClub.github.io/design-system/images/logo_white_text.svg" alt="Democracy Club Home" />
        <span>democracy<br>club</span>
      </a>
      <p>Copyright © 2024
         Democracy Club</p>
      <p>Community Interest Company</p>
      <p>Company No: <a href="https://beta.companieshouse.gov.uk/company/09461226">09461226</a></p>
    </div>
  </div>
</footer>