Southleft's site footer — an asymmetric three-column masthead, a pull quote, and a legal bar.
CODE — HTML
Guidance
Southleft's site footer, and the brand implementation of al-footer: an asymmetric three-column masthead, an optional pull quote, and a legal bar. Altitude's al-footer is a bare landmark with a single slot; this is the whole footer.
WHEN TO USE
- You are building a page on the Southleft design system and it needs the site's closing chrome.
- The footer carries a sitemap and a set of external links that should keep the same column proportions on every page.
WHEN NOT TO USE
- You need a neutral footer landmark to compose something else inside. That is Altitude's, and this design system replaces it, so building your own means arranging with the layout primitive.USE LAYOUT →
- What you want is the closing call to action rather than the site's legal and navigational footer.USE CTA-BAND →
DO
- Pass the pull quote and the copyright as
quote,citeandcopyrightprops. The component renders the blockquote and the legal bar, and hand-built markup will not match their spacing. - Slot each sitemap column as its own element in
columns. The masthead grid places them, and wrapping them in one container collapses three tracks into one.
DON’T
- Do not add block padding to whatever sits above the footer to space it. The component owns its own through
--al-footer-padding-block. - Do not put the primary call to action here. By the time a reader is in the footer they have passed the ask.
ACCESSIBILITY IN PRACTICE
- The footer landmark is the component's, so slot plain lists and anchors rather than another footer element. External links need their own rel attribute, because the component forwards nothing onto slotted content.
CONTENT GUIDELINES
- Column headings are categories in angle brackets by convention, matching the kicker treatment used elsewhere on the site.
WHERE THIS CAME FROM
libs/sl-web-components/components/footer/footer.tsThe brand implementation that registers under the base library tag — the override this guidance opens by describing.libs/sl-web-components/components/footer/footer.tsEach column is placed by the masthead grid, which is why they must be slotted individually..altitude/ds-projects.jsonThe registry declares this as a deliberate same-tag override rather than a collision.
Each line above names a file and a literal string that must still appear in it.pnpm gate:guidance re-reads them from this built page, so guidance that has stopped being true fails a check rather than misleading you.
FIGMA PARITY
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
- DECIDED BY
- CONTRACT DIFF
- FIGMA SIDE
- OBSERVED
- LAST CONFIRMED SYNC
- 2026-08-28
- PUBLIC SURFACE
- 3 ATTR · 4 SLOT · 0 EVENT · 3 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITY
Measured by axe on this documentation site’s own preview of the default story — @southleft/sl-web-components has no Storybook in the measured set.
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 1 STORIES.
INSTALL
import '@southleft/sl-web-components/components/footer';
API — 3 PROPS
SLOTS
EVENTS
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS
CSS CUSTOM PROPERTIES
SOURCE — components/footer/footer.ts · Organisms/Footer