Footer

Open this component in Storybook

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.