Footer

A closing region for contact, legal, source, acknowledgement, and navigation information.

When To Use

Use	Avoid
A closing region for contact, legal, source, acknowledgement, and navigation information.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use layout sections to create predictable page regions and reusable responsive structure.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<footer class="lds-footer">
  <section class="lds-footer-intro" aria-labelledby="footer-organisation">
    <h2 id="footer-organisation">Example Landcare Group</h2>
    <p>Supporting practical local environmental work across the region.</p>
  </section>
  <section class="lds-footer-grid" aria-label="Organisation details and links">
    <div class="lds-footer-section lds-footer-contact">
      <h3>Contact</h3>
      <p>Example Landcare Group<br>Postal address line<br>Locality STATE 0000</p>
      <p><a href="mailto:[email protected]">[email protected]</a><br><a href="tel:+61000000000">00 0000 0000</a></p>
      <h3>Connect</h3>
      <div class="lds-footer-social" aria-label="Social links">
        <a href="mailto:[email protected]" aria-label="Email">M</a>
        <a href="https://www.facebook.com/" aria-label="Facebook">f</a>
        <a href="https://www.linkedin.com/" aria-label="LinkedIn">in</a>
      </div>
    </div>
    <div class="lds-footer-section lds-footer-office">
      <h3>Office</h3>
      <p>Office address line<br>Locality STATE 0000</p>
      <h3>Office Hours</h3>
      <p>9:00 am to 4:00 pm<br>Tuesday to Friday</p>
    </div>
    <div class="lds-footer-section lds-footer-quick-links">
      <h3>Quick Links</h3>
      <nav class="lds-footer-nav" aria-label="Quick links">
        <a href="/news/">News</a>
        <a href="/events/">Events</a>
        <a href="/projects/">Projects</a>
        <a href="/resources/">Resources</a>
        <a href="/contact/">Contact</a>
      </nav>
    </div>
    <div class="lds-footer-section lds-footer-governance">
      <h3>Governance</h3>
      <nav class="lds-footer-nav" aria-label="Governance links">
        <a href="/executive/">Executive</a>
        <a href="/staff/">Staff</a>
        <a href="/notices/">Notices</a>
        <a href="/policies/">Policies</a>
      </nav>
      <h3>Membership</h3>
      <nav class="lds-footer-nav" aria-label="Membership links">
        <a href="/terms/">Terms</a>
        <a href="/code-of-conduct/">Code of Conduct</a>
      </nav>
    </div>
    <div class="lds-footer-section lds-footer-badge-section">
      <div class="lds-footer-badge" aria-label="Registered charity logo placeholder">
        <svg viewBox="0 0 120 120" role="img" aria-labelledby="footer-badge-title footer-badge-desc">
          <title id="footer-badge-title">Registered charity logo placeholder</title>
          <desc id="footer-badge-desc">Replace this placeholder with approved ACNC or accreditation logo artwork where relevant.</desc>
          <circle cx="60" cy="60" r="48" fill="none" stroke="currentColor" stroke-width="6"></circle>
          <text x="60" y="55" text-anchor="middle" fill="currentColor" font-size="12" font-weight="800">ACNC</text>
          <text x="60" y="72" text-anchor="middle" fill="currentColor" font-size="10">logo</text>
        </svg>
      </div>
    </div>
  </section>
</footer>

Class Reference

Class	Use
`.lds-footer`	Styles a full-width digital site footer region.
`.lds-footer-intro`	Creates a top footer row for the organisation name and short on-page description.
`.lds-footer-grid`	Arranges footer contact details, office details, link groups, and badge/logo areas into stable responsive columns.
`.lds-footer-section`	Groups one footer column or subsection with a heading and related content.
`.lds-footer-contact`	Places the contact and connect section in the first footer area.
`.lds-footer-social`	Arranges compact social or contact icon links inside a footer section.
`.lds-footer-office`	Places office address and office hours together in the second footer area.
`.lds-footer-quick-links`	Places the primary footer link group after office details on desktop and mobile.
`.lds-footer-nav`	Styles footer navigation links as a flexible closing link group inside `.lds-footer`.
`.lds-footer-governance`	Places governance, membership, policy, or accountability link groups together.
`.lds-footer-badge-section`	Places approved accreditation, charity, partner, or registry logos in the final footer area.
`.lds-footer-badge`	Provides a controlled area for approved accreditation, charity, partner, or registry logos.

Footer Layout Notes

Area	Use	Avoid
Organisation intro	Use `.lds-footer-intro` for the organisation name and a short on-page description of what it does or where it works.	Avoid long mission statements, campaign copy, or wording that belongs on the About page.
Contact and office groups	Use `.lds-footer-contact` for contact and connect details, then `.lds-footer-office` for office address and office hours. These groups keep their internal order when the footer stacks on mobile.	Avoid splitting contact details, connect links, office details, and hours into separate unrelated columns when they need to stay together.
Link columns	Use `.lds-footer-quick-links`, `.lds-footer-governance`, and `.lds-footer-nav` for grouped links such as Quick Links, Governance, Membership, Resources, Policies, and Contact.	Avoid repeating the whole site map or hiding critical user journeys only in the footer.
Social and contact icons	Use `.lds-footer-social` for compact email, social, or directory links, with accessible labels on each link.	Avoid icon-only links without labels, or unsupported social channels that are not actively maintained.
Badges and logos	Use `.lds-footer-badge` for approved ACNC, accreditation, partner, registry, or membership logos where relevant.	Avoid using unapproved logos, stretched artwork, or badge rows that compete with the primary Landcare brand.

Review Notes

Web

Use layout sections to create predictable page regions and reusable responsive structure.

Print

Use layout sections as reusable page, flyer, report, slide, and signage regions with consistent margins and hierarchy.

States And Variants

Document compact, spacious, image-led, text-led, and repeated-section variants.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.