Footer os-003

Also known as: Site footer, Page footer, Bottom bar

Site footer with copyright and optional multi-column links.

Example

columns

Variants

simple

columns

Multi-column link grid with section headers and legal bar below. See main example above.

How it works

Sits at the bottom of every page. The simple variant is a single copyright line on a dark background. The columns variant adds a grid of categorised links above the copyright — typically navigation, legal, and resource links. Column count adapts from 2 on mobile to 4 on desktop.

Relationships

↔ os-001 Header

Parameters

Name	Type	Default	Description
`brand`	string	—	Brand name for copyright line
`year`	number	current year	Copyright year
`variant`	string	`simple`	`simple` \| `columns`
`columns`	array	`[]`	Column data: `{title, links[]}`
`className`	string	`""`	Additional CSS classes

Tokens

--color-bg --color-bg-secondary --color-border-subtle --color-text --color-text-muted --font-primary --weight-bold --text-sm --tracking-caps --spacing-2 --spacing-4 --spacing-6 --spacing-8 --spacing-12 --container-max

Code

os-003 · Source: components/Footer.jsx ▾

<Footer
  brand="MabV"
  variant="columns"
  columns={[
    {
      title: 'Science',
      links: [
        { label: 'Platform', href: '#platform' },
        { label: 'Pipeline', href: '#pipeline' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About', href: '#about' },
        { label: 'Contact', href: '#contact' },
      ],
    },
    {
      title: 'Legal',
      links: [
        { label: 'Privacy', href: '#' },
        { label: 'Terms', href: '#' },
      ],
    },
  ]}
/>

Footer os-003

Product

Company

Resources

Legal