Skip to content
JSON Resume Styleguide
GitHub

Site

Site footer

Small, centered, uppercase links.

import { SiteFooter } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Footer
site-footer/default.tsx
import { SiteFooter } from '@jsonresume/ui';

export default function SiteFooterDefault() {
  return (
    <SiteFooter
      note="JSON Resume is open source"
      links={[
        <a key="gh" href="https://github.com/jsonresume">
          View on GitHub
        </a>,
        <a key="ai" href="https://jsonresume.org/ai">
          AI
        </a>,
        <a key="blog" href="https://jsonresume.org/blog">
          Blog
        </a>,
        <a key="media" href="https://jsonresume.org/media">
          Media
        </a>,
      ]}
    />
  );
}

Accessibility

  • Renders a <footer> landmark with a list of links.

Props

<SiteFooter>

Also accepts the attributes of the element SiteFooter renders.
PropTypeDefaultDescription
linksReactNode[][]Footer links; rendered as a centered list.
noteReactNode–