UI Kit 2 components
UI Kit 2 hooks
Product bridge APIs
Jira bridge APIs
Upgrade to latest UI Kit 2
Previous versions

Heading

To add the Heading component to your app:

1
2
import { Heading } from '@forge/react';

Description

A heading is a typography component used to display text in different sizes and formats.

Props

NameTypeRequiredDescription
as"h1" | "h2" | "h3" | "h4" | "h5" | "h6"YesAllows the component to be rendered as the specified DOM element.
childrenstringNoThe text of the heading.
color"default" | "inverse"NoText color of the heading. Use "inverse" option for a light text color over a dark background. Defaults to "default".
idstringNoUnique identifier for the heading DOM element.

Examples

Basic

The selected as will affect the final HTML element rendered in the DOM.

Example image of headings and their levels

1
2
import { Stack, Heading } from "@forge/react";

const HeadingBasicExample = () => {
  return (
    <Stack space="space.100">
      <Heading as="h1">h1</Heading>
      <Heading as="h2">h2</Heading>
      <Heading as="h3">h3</Heading>
      <Heading as="h4">h4</Heading>
      <Heading as="h5">h5</Heading>
      <Heading as="h6">h6</Heading>
    </Stack>
  );
};

Inverse

Set color to change the text color in the heading. Use color="inverse" for headings placed on a dark surface for better color contrast.

Example image of heading with inverse color

1
2
import { Box, Heading } from "@forge/react";

const HeadingInverseExample = () => {
  return (
    <Box backgroundColor="color.background.neutral.bold">
      <Heading color="inverse" as="h1">
        Heading
      </Heading>
    </Box>
  );
};

Accessibility considerations

When using the Heading component, we recommend keeping the following accessibility considerations in mind:

  • Consistent and clear hierarchy helps people navigate the page. Use headings and titles to outline the page so people can understand the page structure.

  • The most important heading has the rank 1 (<h1>), the least important heading has the rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. There should only be one rank 1 (<h1>) heading per page which explains the main purpose of the page.

  • Never skip lower heading levels. For example, a <h2> should not be followed by an <h4>. It should be followed by an <h3> (for a lower section in the hierarchy), or another <h2> (for a section of the same level of importance). It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow a <h4> as it closes the previous section.

  • Text should be a minimum of 3:1 color contrast when it is 24px or larger, and 4.5:1 color contrast when it is under 24px. Use color="inverse" for headings placed on a dark surface for better color contrast.

Rate this page: