Site

Page header

The title band at the top of inner pages: a light 40px title on light gray.

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

Examples

Page header

Docs

Schema

The JSON Resume schema: a community-driven standard for resumes.

page-header/default.tsx

import { Button, PageHeader } from '@jsonresume/ui';

export default function PageHeaderDefault() {
  return (
    <PageHeader
      eyebrow="Docs"
      title="Schema"
      description="The JSON Resume schema: a community-driven standard for resumes."
      actions={<Button>View on GitHub</Button>}
    />
  );
}

Brand tone

Your resume as code

Write it once in JSON, render it in any theme, host it from a gist.

page-header/brand.tsx

import { Button, PageHeader } from '@jsonresume/ui';

// The brand tone suits landing sections inside the registry.
export default function PageHeaderBrand() {
  return (
    <PageHeader
      tone="brand"
      title="Your resume as code"
      description="Write it once in JSON, render it in any theme, host it from a gist."
      actions={<Button variant="primary">Get started</Button>}
    />
  );
}

Accessibility

Renders the page’s single h1.

Props

Also accepts the attributes of the element PageHeader renders.
Prop	Type	Default	Description
title required	ReactNode	–
actions	ReactNode	–
description	ReactNode	–
eyebrow	ReactNode	–	Small uppercase label above the title.
tone	brandpagesubtle	–