Components
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

Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.

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.

import { forwardRef, useMemo } from 'react'
import { type HTMLStyledProps, type StyledComponent, styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'

type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

export type HeadingProps = {
  as?: As
} & TextVariantProps &
  HTMLStyledProps<As>

export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { as = 'h2', ...localProps } = props
  const Dynamic = useMemo(() => styled(as, text) as StyledComponent<As>, [as])

  return <Dynamic ref={ref} {...localProps} />
})

Heading.displayName = 'Heading'

Previous

Code

Next

Kbd