Footer

Provides information related your service at the bottom of every page.

Props

maxcontentwidth
string
The maximum width of the main content area
testId
string
Sets a data-testid attribute for automated testing.
url
string
URL for the Government of Alberta logo link. Set to empty string to disable the link.
Defaults to https://alberta.ca.

Slots

nav
Named slot for content
meta
Named slot for content
 Examples

Basic page layout

ReactAngularWeb Components
<GoabOneColumnLayout>
      <section slot="header">
        <GoabMicrositeHeader type="alpha" version="UAT" />
        <GoabAppHeader url="/" heading="Design System">
          <a href="/login">Sign in</a>
        </GoabAppHeader>
      </section>
      <GoabPageBlock width="704px">
        <p>
          <GoabSkeleton type="header" size="4" />
          <GoabSkeleton type="text" size="1" />
        </p>
        <p>
          <GoabSkeleton type="header" size="4" />
          <GoabSkeleton type="text" size="1" />
        </p>
        <GoabGrid minChildWidth="30ch">
          <GoabSkeleton type="card" size="2" />
          <GoabSkeleton type="card" size="2" />
        </GoabGrid>
      </GoabPageBlock>
      <section slot="footer">
        <GoabAppFooter />
      </section>
    </GoabOneColumnLayout>
ReactAngularWeb Components
<GoabAppFooter maxContentWidth="100%">
      <GoabAppFooterNavSection maxColumnCount={1}>
        <a href="a.html">Arts and culture</a>
        <a href="b.html">Education and training</a>
        <a href="c.html">Family and social supports</a>
        <a href="d.html">Housing and community</a>
        <a href="e.html">Life events</a>
        <a href="f.html">Business and economy</a>
        <a href="g.html">Emergencies and public safety</a>
        <a href="h.html">Government</a>
        <a href="i.html">Jobs and employment</a>
        <a href="j.html">Moving to Alberta</a>
      </GoabAppFooterNavSection>
      <GoabAppFooterMetaSection>
        <a href="privacy.html">Privacy</a>
        <a href="disclaimer.html">Disclaimer</a>
        <a href="accessibility.html">Accessibility</a>
        <a href="using-alberta.html">Using Alberta.ca</a>
      </GoabAppFooterMetaSection>
    </GoabAppFooter>
ReactAngularWeb Components
<GoabAppFooter maxContentWidth="100%">
      <GoabAppFooterMetaSection>
        <a href="#">Give feedback</a>
        <a href="#">Accessibility</a>
        <a href="#">Privacy</a>
        <a href="#">Contact us</a>
      </GoabAppFooterMetaSection>
    </GoabAppFooter>

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.