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.
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.
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"
Design system version for styling.
Defaults to 1.

ReactNode

meta
goa-app-footer-meta-section
Named slot for content
nav
goa-app-footer-nav-section
Named slot for content
testId
string
Sets a data-testid attribute for automated testing.
slot
"meta"
Sets the slot to "meta" to render the section in the correct footer position.
testId
string
Sets a data-testid attribute for automated testing.
testid
string
Sets a data-testid attribute for automated testing.
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.
slot
"nav"
Sets the slot to "nav" to render the section in the correct footer position.
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.
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.
Examples

Other

Don't
Don't customize the links in the footer.

Main content goes here
Do
Use the one column layout to ensure consistent page structure, proper header/footer placement, and responsive behavior.

Positioning

Don't
Don't show white space below the footer. Extend the footer background to the bottom of the page.
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.
View old component docs