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.
version
1 | 2
Defaults to
1.
Slots
nav
Named slot for content
meta
Named slot for content
Footer Meta Section Props
testId
string
Sets a data-testid attribute for automated testing.
Footer Nav Section Props
heading
string
The section heading displayed above the navigation links.
maxcolumncount
number
Maximum number of columns to display links in on larger screens.
Defaults to
1.
testId
string
Sets a data-testid attribute for automated testing.
Basic page layout
<GoabOneColumnLayout>
<section slot="header">
<GoabAppHeader url="/" heading="Service name">
<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><goab-one-column-layout>
<section slot="header">
<goab-app-header url="/" heading="Service name">
<a href="/login">Sign in</a>
</goab-app-header>
</section>
<goab-page-block width="704px">
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<goab-grid minChildWidth="30ch">
<goab-skeleton type="card" size="2"></goab-skeleton>
<goab-skeleton type="card" size="2"></goab-skeleton>
</goab-grid>
</goab-page-block>
<section slot="footer">
<goab-app-footer></goab-app-footer>
</section>
</goab-one-column-layout><goa-one-column-layout>
<section slot="header">
<goa-app-header version="2" url="/" heading="Service name">
<a href="/login">Sign in</a>
</goa-app-header>
</section>
<goa-page-block width="704px">
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<goa-grid min-child-width="30ch">
<goa-skeleton type="card" size="2"></goa-skeleton>
<goa-skeleton type="card" size="2"></goa-skeleton>
</goa-grid>
</goa-page-block>
<section slot="footer">
<goa-app-footer version="2"></goa-app-footer>
</section>
</goa-one-column-layout>Show links to navigation items
<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><goab-app-footer maxContentWidth="100%">
<goab-app-footer-nav-section slot="nav" [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>
</goab-app-footer-nav-section>
<goab-app-footer-meta-section slot="meta">
<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>
</goab-app-footer-meta-section>
</goab-app-footer><goa-app-footer version="2" maxcontentwidth="100%">
<goa-app-footer-nav-section slot="nav" 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>
</goa-app-footer-nav-section>
<goa-app-footer-meta-section slot="meta">
<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>
</goa-app-footer-meta-section>
</goa-app-footer>Show quick links
<GoabAppFooter maxContentWidth="100%">
<GoabAppFooterMetaSection>
<a href="#">Give feedback</a>
<a href="#">Accessibility</a>
<a href="#">Privacy</a>
<a href="#">Contact us</a>
</GoabAppFooterMetaSection>
</GoabAppFooter><goab-app-footer maxContentWidth="100%">
<goab-app-footer-meta-section slot="meta">
<a href="#">Give feedback</a>
<a href="#">Accessibility</a>
<a href="#">Privacy</a>
<a href="#">Contact us</a>
</goab-app-footer-meta-section>
</goab-app-footer><goa-app-footer version="2" maxcontentwidth="100%">
<goa-app-footer-meta-section slot="meta">
<a href="#">Give feedback</a>
<a href="#">Accessibility</a>
<a href="#">Privacy</a>
<a href="#">Contact us</a>
</goa-app-footer-meta-section>
</goa-app-footer>