Typography

Heading

Display h1-h6 headings with Hope UI styling features.

Import

tsx
import { Heading } from "@hope-ui/core";

tsx
import { Heading } from "@hope-ui/core";

Usage

Heading renders a semibold h2 tag by default and supports style props, sx and the polymorphic as prop.

I'm a Heading

tsx
<Heading>I'm a Heading</Heading>

tsx
<Heading>I'm a Heading</Heading>

Changing the level

To change the rendered heading tag pass the level prop with a value from 1 to 6. For example, level 3 will render an h3.

The quick brown fox

tsx
<VStack spacing={3} align="flex-start">
  <Heading level="1">The quick brown fox</Heading>
  <Heading level="2">The quick brown fox</Heading>
  <Heading level="3">The quick brown fox</Heading>
  <Heading level="4">The quick brown fox</Heading>
  <Heading level="5">The quick brown fox</Heading>
  <Heading level="6">The quick brown fox</Heading>
</VStack>

tsx
<VStack spacing={3} align="flex-start">
  <Heading level="1">The quick brown fox</Heading>
  <Heading level="2">The quick brown fox</Heading>
  <Heading level="3">The quick brown fox</Heading>
  <Heading level="4">The quick brown fox</Heading>
  <Heading level="5">The quick brown fox</Heading>
  <Heading level="6">The quick brown fox</Heading>
</VStack>

The level prop is primarily for semantic purpose as it does not alter the heading styles.

Changing the font size

To increase the font size of the text, you can pass the size prop. It applies a combination of fontSize and lineHeight for an optimal reading experience.

(9xl) The quick brown fox

(8xl) The quick brown fox

(7xl) The quick brown fox

(6xl) The quick brown fox

(5xl) The quick brown fox

(4xl) The quick brown fox

(3xl) The quick brown fox

(2xl) The quick brown fox

(xl) The quick brown fox

(lg) The quick brown fox

(base) The quick brown fox

(sm) The quick brown fox

(xs) The quick brown fox

tsx
<VStack spacing={3} align="flex-start">
  <Heading size="9xl">(9xl) The quick brown fox</Heading>
  <Heading size="8xl">(8xl) The quick brown fox</Heading>
  <Heading size="7xl">(7xl) The quick brown fox</Heading>
  <Heading size="6xl">(6xl) The quick brown fox</Heading>
  <Heading size="5xl">(5xl) The quick brown fox</Heading>
  <Heading size="4xl">(4xl) The quick brown fox</Heading>
  <Heading size="3xl">(3xl) The quick brown fox</Heading>
  <Heading size="2xl">(2xl) The quick brown fox</Heading>
  <Heading size="xl">(xl) The quick brown fox</Heading>
  <Heading size="lg">(lg) The quick brown fox</Heading>
  <Heading size="base">(base) The quick brown fox</Heading>
  <Heading size="sm">(sm) The quick brown fox</Heading>
  <Heading size="xs">(xs) The quick brown fox</Heading>
</VStack>

tsx
<VStack spacing={3} align="flex-start">
  <Heading size="9xl">(9xl) The quick brown fox</Heading>
  <Heading size="8xl">(8xl) The quick brown fox</Heading>
  <Heading size="7xl">(7xl) The quick brown fox</Heading>
  <Heading size="6xl">(6xl) The quick brown fox</Heading>
  <Heading size="5xl">(5xl) The quick brown fox</Heading>
  <Heading size="4xl">(4xl) The quick brown fox</Heading>
  <Heading size="3xl">(3xl) The quick brown fox</Heading>
  <Heading size="2xl">(2xl) The quick brown fox</Heading>
  <Heading size="xl">(xl) The quick brown fox</Heading>
  <Heading size="lg">(lg) The quick brown fox</Heading>
  <Heading size="base">(base) The quick brown fox</Heading>
  <Heading size="sm">(sm) The quick brown fox</Heading>
  <Heading size="xs">(xs) The quick brown fox</Heading>
</VStack>

Truncate text

If you'd like to truncate the text after a specific number of lines, pass the lineClamp prop and set it to the desired number of lines.

It will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

tsx
<Heading lineClamp={1}>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
  previewing layouts and visual mockups.
</Heading>

tsx
<Heading lineClamp={1}>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
  previewing layouts and visual mockups.
</Heading>

Theming

Use the HeadingTheme type to override Heading styles and default props when extending Hope UI theme.

tsx
import { extendTheme, HeadingTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Heading: {
      // ...overrides
    } as HeadingTheme,
  },
});

tsx
import { extendTheme, HeadingTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Heading: {
      // ...overrides
    } as HeadingTheme,
  },
});

Component parts

Name	Static selector	Description
root	`hope-Heading-root`	Root element

Props

Name	Type	Description
level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	The level of heading to be rendered. For example `3` will render a h3.
size	`"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"`	The size of the text. It apply a combination of `font-size` and `line-height`.
lineClamp	`ResponsiveValue<number>`	The number of lines the text should be truncate.