Spring — Design Library home
ComponentStable

Components / Navigations

SpringFooter

Global footer on the brand surface — Spring logo plus link columns. Reflows from a single desktop row (≥ lg · 1024px) into a stacked 2-col grid for tablet and mobile widths.
FigmaSourceFigma · Legal

Installation

Install the package from npm, then import the component in your application code.

Terminal
Copied!
Import
Copied!

02

Anatomy

Footer docs use two composition layers: navigation/footer columns + legal strip. Keep both sections together in production pages.

Parts

  1. Brand surface shell

    Root footer on brand-primary surface with on-brand text.

  2. Brand mark slot

    Left SpringLogo area; can be custom node or link-wrapped logo.

  3. Column model

    Data-driven columns: title + items[] (label/href/icon/onClick).

  4. Social column behavior

    kind='social' anchors to bottom-left row on mobile reflow.

  5. Responsive split

    Desktop row at lg+, stacked 2x2 grid below lg.

  6. Legal pairing

    Pair with <SpringFooterLegal /> beneath in production pages — see Variants.

03

Variants

Base footer stays constant; legal footer switches variant by context (appflow vs marketing).
Copied!

Licence #349123

* Spring Financial Inc. provides loans up to $35,000 with interest rates ranging from 9.99% to 34.95%, and APRs from 9.99% to 35%, with terms from 6 to 84 months. Your actual rate will depend on a variety of factors such as your credit score and the loan amount.

An example of borrowing costs paid on a $5,000 loan with a 48 month term at 9.99% APR is a Weekly payment of $29.17, with the total repayment amount of principal and interest being $6,066.48 and the total cost of the loan (interest only) being $1,066.48.

To qualify for The Foundation, you must have an active account with a bank or financial institution, as approved by Spring Financial, and a valid government-issued Canadian ID. The Foundation is available in all provinces except Saskatchewan and New Brunswick. Results from The Foundation depend on the individual. All guarantee references are made in connection to the Evergreen Loan. To qualify for the Evergreen Loan, you must first successfully complete 12 months on The Foundation and save $750, have an active account with a bank or financial institution, as approved by Spring Financial, and a valid government-issued Canadian ID.

Spring Financial Inc. is headquartered at Suite 600, Two Bentall Centre, 555 Burrard Street, Vancouver, British Columbia, Canada, V7X 1M8.

Copyright © 2026 Spring Financial Inc. All rights reserved. Spring Financial Inc. and its loans are not affiliated with any credit bureaus.

Copied!

04

Develop

Combined API reference for both navigation footer and legal footer variant.
ComponentPropTypeNotes
SpringFootercolumnsSpringFooterColumn[]Data model for link columns.
SpringFooterlogo / logoHrefReactNode / stringBrand mark override or link wrapper.
SpringFooterclassNamestringMerged on root <footer>.
SpringFooterLegalvariant'appflow' | 'marketing'Context switch for legal surface + default copy.
SpringFooterLegallicenseReactNode | nullTop headline row; null removes section.
SpringFooterLegaldisclosuresReactNode[] | nullLegal paragraph stack; null removes section.
SpringFooterLegalcopyrightReactNode | nullSingle copyright row; null removes section.
SpringFooterLegallegalLinksSpringFooterLegalLink[] | nullBottom legal links row.