Heading

Headings aid users in understanding the content hierarchy, allowing for a more seamless navigation through different sections of our application. Each hierarchical level of a heading should correlate to the degree of importance and order within the page layout, starting from the most important "Cover Title" to the least important "H7".

All Headings are made of corresponding Header typography tokens, and therefore they all have the line heights of 100% of the text heights. Thus the overall Heading heights are always equal to the line height of each Typography token (no extra padding). Since these tokens don't have enough line heights for inter-lineage, they are not suitable to use in texts that will wrap down to the next line, especially in responsive screens, even if they are Titles of the screen. In such cases do not use Heading components (or Header type tokens), but instead use any other type tokens with sufficient line heights, such as Body text, etc.

Note: The restriction for text to not wrap down to the next line is a design restriction, so it is not reflected in code. If in future use cases we will require Headings to wrap dow, we shall add extra line heights ( appr. 150%) to the text for better readability.

Playground

Type

BrandLightDarkGrey

Brand

Text

Level

1234567

1

---

Playground Theme

Dark Mode

Purple Background

Heading

        
          

            <
            Heading

            





            

                text
              
                =
                "Heading"
              

                level
              
                =
                "1"
              

                type
              
                =
                "brand"
              



  />

Anatomy and Behavior

1. Container - contains the Label text, has no padding or margin
2. Label text - descriptive, concise text summarizing the section presented

Variants

Level
There are 8 levels of Headings: 0-Cover title, H1, H2, H3, H4, H5, H6, H7 in descending order of importance where 0 - Cover Title is the most important and H7 is the least important according to HTML headings hierarchy. As BDS will evolve we will have more established usage guidelines for these levels.

Heading
		H1	H2	H3	H4	H5	H6	H7
Types	Light	Heading	Heading	Heading	Heading	Heading	Heading	Heading
	Dark	Heading	Heading	Heading	Heading	Heading	Heading	Heading
	Grey	Heading	Heading	Heading	Heading	Heading	Heading	Heading
	Brand	Heading	Heading	Heading	Heading	Heading	Heading	Heading

Color

There are 4 options: Dark, Grey, Brand and Light

Properties

export type HeadingType = "dark" | "light" | "grey" | "brand";

export interface HeadingProps extends ElementProps {
  level?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
  text?: string;
  type?: HeadingType;
}