Typography

Heading

Large headings are light (300), the signature of jsonresume.org; smaller ones step up in weight to stay legible. Level and size are independent.

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

Playground

Change the props and copy the result.

Getting started

size

level

children

jsx

<Heading size="title" level={2}>Getting started</Heading>

Examples

Scale

JSON Resume

Getting Started

What is this?

Command Line Tool

Exporting

Raw formats

Show code

heading/scale.tsx

import { Heading, Stack } from '@jsonresume/ui';

export default function HeadingScale() {
  return (
    <Stack gap={4}>
      <Heading level={1} size="display">
        JSON Resume
      </Heading>
      <Heading level={2} size="title">
        Getting Started
      </Heading>
      <Heading level={3} size="section">
        What is this?
      </Heading>
      <Heading level={4} size="subsection">
        Command Line Tool
      </Heading>
      <Heading level={5} size="group">
        Exporting
      </Heading>
      <Heading level={6} size="label">
        Raw formats
      </Heading>
    </Stack>
  );
}

Usage

Do

Pick level for the document outline and size for the look.
Use one level-1 heading per page.

Don’t

Skip levels to get a smaller heading: use size instead.
Bold large headings.

Accessibility

Levels produce real h1–h6 elements, so headings form a navigable outline.
Headings wrap with balanced lines and never truncate.

Props

Also accepts the attributes of the element Heading renders.
Prop	Type	Default	Description
level	123456	2	Document outline level. Choose it for structure; choose `size` for looks.
size	groupdisplaytitlelabelsectionsubsection	–	Style variant.