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
NameTypeDefaultDescription
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.