Footer

Site footer component with automatic copyright year and optional links. Uses a subtle background color and centered layout.

Installation

typescript

import { Footer } from '@happyvertical/smrt-svelte';

Basic Usage

Footer with automatic copyright year.

svelte

<Footer />

With Links

Add footer links using the children snippet.

svelte

<Footer>
  <a href="/privacy">Privacy Policy</a>
  <a href="/terms">Terms of Service</a>
  <a href="/contact">Contact</a>
</Footer>

Common Pattern

Footer typically placed at the bottom of your layout.

svelte

<script>
  import { Header, Container, Footer } from '@happyvertical/smrt-svelte';
</script>

<div class="app">
  <Header>
    {#snippet logo()}
      <a href="/"><h1>My App</h1></a>
    {/snippet}
  </Header>

  <main>
    <Container>
      <slot />
    </Container>
  </main>

  <Footer>
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </Footer>
</div>

<style>
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
  }
</style>

Props

Prop	Type	Default	Description
`children`	`Snippet`	-	Content for footer links

TypeScript

typescript

import { Footer } from '@happyvertical/smrt-svelte';

interface Props {
  children?: Snippet;
}