Documentation

Documentation

Footer

Page footer with a logo row, three link columns, and a bottom bar.

The <dsgn-footer> component renders the site footer: a logo beside up to three link columns, then a bottom bar for legal or copyright text. It wraps its content in an <dsgn-container>, so its width and padding are configured on the footer itself rather than by nesting.

Usage

<dsgn-footer>
  <a href="/" slot="logo">DS-GN</a>
  <div slot="col-1">
    <a href="/docs">Docs</a>
    <a href="/components">Components</a>
  </div>
  <dsgn-text slot="bottom" size="sm" surface="dark"
    >© 2026 DS-GN.</dsgn-text
  >
</dsgn-footer>

Import the component module in your application entrypoint:

import '@ds-gn/ui/footer';

Props

Prop Type Default Description
container-size 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' '2xl' Maximum width of the inner container.
padding-x 'none' | 'sm' | 'md' | 'lg' | 'xl' 'sm' Horizontal padding of the inner container.
padding-y 'none' | 'sm' | 'md' | 'lg' | 'xl' 'lg' Vertical padding of the inner container.
surface 'light' | 'dark' 'dark' Semantic token surface to use. Defaults to dark.

container-size, padding-x, and padding-y are the attribute names; the matching JavaScript properties are containerSize, containerPaddingX, and containerPaddingY.

Slots

Slot Description
logo Logo or brand mark, at the top-left of the footer.
col-1 First navigation column.
col-2 Second navigation column.
col-3 Third navigation column.
bottom Bottom bar content, typically copyright text.

There are exactly three link columns and no default slot — a fourth column, or unslotted content, is not rendered.

Examples

<dsgn-footer surface="dark">
  <a href="/" slot="logo">DS-GN</a>
  <div slot="col-1">
    <a href="/docs">Docs</a>
    <a href="/components">Components</a>
  </div>
  <div slot="col-2">
    <a href="/pricing">Pricing</a>
    <a href="/changelog">Changelog</a>
  </div>
  <div slot="col-3">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </div>
  <dsgn-text slot="bottom" size="sm" surface="dark"
    >© 2026 DS-GN.</dsgn-text
  >
</dsgn-footer>
<dsgn-footer container-size="xl" padding-x="md" padding-y="xl">
  <dsgn-text slot="bottom" size="sm" surface="dark"
    >© 2026 DS-GN.</dsgn-text
  >
</dsgn-footer>

On a light page

<dsgn-footer surface="light">
  <a href="/" slot="logo">DS-GN</a>
  <dsgn-text slot="bottom" size="sm">© 2026 DS-GN.</dsgn-text>
</dsgn-footer>

Usage patterns

  • The footer defaults to surface="dark". Set surface="dark" on the components you slot in as well — slotted content is themed by its own element.
  • Match container-size to the rest of the page (2xl matches <dsgn-nav> and <dsgn-hero>) so the footer’s content lines up with the sections above it.
Esc