Page footer

The marketing/site footer: a short brand blurb on the left and a set of link columns that wrap into a responsive grid. The columns use auto-fit so three columns on desktop collapse to one on a phone without a media query. Links are plain <a> elements. Pass your own brand node to replace the default glyph and wordmark.

'use client';

import type { ReactNode } from 'react';
import { Flex, Grid, Stack, Text } from '@helix-ui/core';
import { HelixIcon } from '@helix-ui/icons';

export interface PageFooterProps {
  columns: { heading: string; links: { label: string; href: string }[] }[];
  brand?: ReactNode;
  tagline?: string;
  /** e.g. "© 2026 Acme, Inc. All rights reserved." */
  copyright?: string;
}

export function PageFooter({ columns, brand, tagline, copyright }: PageFooterProps) {
  return (
    <footer
      style={{
        borderTop: '1px solid var(--helix-ui-color-border-default)',
        background: 'var(--helix-ui-color-bg-surface-subtle)',
        padding: 'var(--helix-ui-space-8) var(--helix-ui-space-5)',
      }}
    >
      <Flex justify="between" gap={8} wrap>
        <Stack gap={2} style={{ maxWidth: 260 }}>
          <Flex align="center" gap={2}>
            {brand ?? (
              <>
                <HelixIcon />
                <Text weight="semibold">helix-ui</Text>
              </>
            )}
          </Flex>
          {tagline ? (
            <Text size="sm" tone="muted">
              {tagline}
            </Text>
          ) : null}
        </Stack>

        <Grid columns="repeat(auto-fit, minmax(140px, 1fr))" gap={8} style={{ flex: '1 1 380px' }}>
          {columns.map((col) => (
            <Stack key={col.heading} gap={3}>
              <Text
                size="xs"
                weight="semibold"
                tone="muted"
                style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}
              >
                {col.heading}
              </Text>
              <Stack gap={2}>
                {col.links.map((link) => (
                  <a
                    key={link.href}
                    href={link.href}
                    style={{
                      fontSize: 'var(--helix-ui-font-size-sm)',
                      textDecoration: 'none',
                      color: 'var(--helix-ui-color-text-secondary)',
                    }}
                  >
                    {link.label}
                  </a>
                ))}
              </Stack>
            </Stack>
          ))}
        </Grid>
      </Flex>

      {copyright ? (
        <Text as="p" size="xs" tone="muted" style={{ marginTop: 'var(--helix-ui-space-8)' }}>
          {copyright}
        </Text>
      ) : null}
    </footer>
  );
}

Usage

<PageFooter
  tagline="An AI-friendly design system you can read and paste."
  copyright="© 2026 helix-ui"
  columns={[
    {
      heading: 'Product',
      links: [
        { label: 'Components', href: '/docs/components' },
        { label: 'Blocks', href: '/docs/blocks' },
      ],
    },
    {
      heading: 'Company',
      links: [
        { label: 'About', href: '/about' },
        { label: 'Contact', href: '/contact' },
      ],
    },
  ]}
/>

Notes

• Keep it to 3-4 columns. Beyond that, footers turn into sitemaps and people stop scanning them.
• The minmax(140px, 1fr) floor is the readable minimum for a stacked link column; drop it lower and headings start to truncate.