Layout

Footer

Footer composition primitive with brand copy, grouped links, and legal row content.

import { Footer } from '@lostgradient/cinder/footer';
layoutnavigationfooter
01

Overview

Footer layout primitive for brand text, grouped links, and a legal row.

Usage

svelte 
<script lang="ts">
  import { Footer } from '@lostgradient/cinder/footer';

  const groups = [
    { id: 'product', title: 'Product', links: [{ id: 'docs', label: 'Docs', href: '/docs' }] },
  ];
</script>

<Footer brand="Acme" {groups} copyright="© 2026 Acme" />
Live preview
02

When to use

Use when
  • Building page-level footer chrome with grouped resource links and legal text.
  • Keeping lower-page wayfinding and compliance links in one responsive region.
Avoid when
  • You need top-level route switching with active state handling. Use Navigation bar instead
  • You need dense in-content navigation rather than page chrome.
03

Examples

Footer layout

Brand copy, grouped links, and legal row composition.

04

Props

Props for footer
Name Type Default Required Bindable Description
brand text Optional brand/title text rendered in the first column.
description text Optional supporting copy rendered under brand.
groups FooterGroup[] [] Link groups rendered as columns in the main area.
legalLinks FooterLink[] [] Additional links rendered in the legal row.
copyright text Copyright text in the legal row.
label text 'Footer' Accessible label for the footer landmark.