Headings

Heading components that mirror HTML equivalents

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Features

Accepts size prop that works on all styles.

Define custom fonts with styles per-size.

Installation

Headings is already installed in hanzogui, or you can install it independently:

yarn
npm
bun
pnpm
yarn add @hanzogui/text

import { H1, H2, H3, H4, H5, H6, Heading } from '@hanzo/gui'

export default () => (
  <>
    <H1>Heading 1</H1>
    <H2>Heading 2</H2>
    <H3>Heading 3</H3>
    <H4>Heading 4</H4>
    <H5>Heading 5</H5>
    <H6>Heading 6</H6>
    <Heading>Heading</Heading>
  </>
)

The headings all extend from the base Heading component. Note, this is just our own theme for Zen headings, but you can change the styles for any font completely.

Gui expects for your font.size to have the keys 1-10 so headings work with your font tokens automatically.

How it works

The Heading component is defined as follows:

export const Heading = styled(Paragraph, {
  tag: 'span',
  name: 'Heading',
  accessibilityRole: 'header',
  fontFamily: '$heading',
  size: '$8',
  margin: 0,
})

Note that Heading, and H1-H6 all default to the heading font family that must be defined in your hanzogui.config.ts.

Because Paragraph extends SizableText, you get automatic styles based on your font theme. Let’s see how SizableText defines the size variant, roughly, which gives a good idea of how Gui works, and how you could create or change your own headings at a lower level.

import { Text } from '@hanzo/gui' // or '@hanzogui/core'

const SizableText = styled(Text, {
  name: 'SizableText',
  fontFamily: '$body',
  color: '$color',

  variants: {
    size: {
      '...fontSize': (val, { font, props }) => {
        const fontSize = font.size[val]
        const lineHeight = font.lineHeight[val]
        const fontWeight = font.weight[val]
        const letterSpacing = font.letterSpacing[val]
        const fontStyle = font.style?.[val]
        const textTransform = font.transform?.[val]
        return {
          fontStyle,
          textTransform,
          fontWeight,
          letterSpacing,
          fontSize,
          lineHeight,
        }
      },
    },
  },

  defaultVariants: {
    // note hanzogui uses a generic "true" token that your sizes should set to be the same as the default on your scale
    size: '$true',
  },
})

API Reference

Heading

Headings extend SizableText props inheriting all the Gui standard props.

Grid

Text

Edit this page on GitHub.