Park UI Logo
GitHub
Typography
Heading

Heading

For headings and subheadings.

Usage

Sphinx of black quartz, judge my vow.

<Heading>Sphinx of black quartz, judge my vow.</Heading>

Examples

As another element

The Heading component renders as an h2 element by default. Use the as property to specify a different HTML tag.

Level 1

Level 2

Level 3

<>
  <Heading as="h1">Level 1</Heading>
  <Heading as="h2">Level 2</Heading>
  <Heading as="h3">Level 3</Heading>
</>

Font Size

Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures text size is even for better layout.

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

<>
  <Heading size="xs">Ag</Heading>
  <Heading size="sm">Ag</Heading>
  <Heading size="md">Ag</Heading>
  <Heading size="lg">Ag</Heading>
  <Heading size="xl">Ag</Heading>
  <Heading size="2xl">Ag</Heading>
  <Heading size="3xl">Ag</Heading>
  <Heading size="4xl">Ag</Heading>
  <Heading size="5xl">Ag</Heading>
  <Heading size="6xl">Ag</Heading>
  <Heading size="7xl">Ag</Heading>
</>

Font Weight

Use the fontWeight prop to set the text weight.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

<>
  <Heading fontWeight="light">Sphinx of black quartz, judge my vow.</Heading>
  <Heading fontWeight="normal">Sphinx of black quartz, judge my vow.</Heading>
  <Heading fontWeight="medium">Sphinx of black quartz, judge my vow.</Heading>
  <Heading fontWeight="semibold">Sphinx of black quartz, judge my vow.</Heading>
  <Heading fontWeight="bold">Sphinx of black quartz, judge my vow.</Heading>
</>

Installation

Insert code snippet into your project. Update import paths as needed.

npx @park-ui/cli components add heading