COMPONENTS / ORGANISMS / al-footer← ALL COMPONENTS

Footer

<al-footer><ALFooter> REACTbeta

The site footer landmark and its vertical rhythm. Footer owns the `<footer>` element, its block padding and the gap between stacked rows. Arrangement is `<al-layout>`'s job — link columns, legal rows and social clusters are the page's composition.

PLAYGROUND0 CONTROLS
PREVIEW / al-footer / ALTITUDE
Loading preview
Product FeaturesPricingChangelog Company AboutCareersContact Resources DocsSupport © 2026 Altitude. All rights reserved. Privacy Terms X LinkedIn
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
0 ATTR · 1 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEfooter--CentredStackPASS
Advanced statesAXE3 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 4 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
INSTALL@southleft/al-web-components/components/footer
import '@southleft/al-web-components/components/footer';
import { ALFooter } from '@southleft/al-react';
API — 0 PROPS0 DOCUMENTED
THIS COMPONENT DECLARES NO PUBLIC PROPERTIES IN THE MANIFEST.
SLOTS1
SLOTDESCRIPTION
(default)The footer content. Wrap each row in an `<al-layout>` to arrange it.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS CUSTOM PROPERTIES4
PROPERTYDESCRIPTIONDEFAULT
--al-footer-gapBlock gap between top-level children. Defaults to `--al-theme-space-lg`.—
--al-footer-padding-blockBlock padding above and below the content. Defaults to three space units.—
--al-footer-backgroundFooter surface. Defaults to `transparent` so the page background shows through; set it to a sunken token to separate the footer from the content above.—
--al-footer-border-block-startHairline rule above the footer. Defaults to `none`.—
SOURCE — components/footer/footer.ts · Organisms/Footer