Heading

Usage

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.

Types

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.

Every brand and each of these levels have 3 Types each:

• Color that corresponds to brands’ original Logo colors.
• Light that can be used on dark backgrounds, especially when used over the saturated brand colors
• Dark that can be used on light backgrounds, in cases where Logo should not be very prominent in the given interface. The type of logo used may vary based on design requirements
• Metal that can be used for illustration and animation purposes. It has inset shadow, and therefore can not be exported as an SVG.

Anatomy and Behavior

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

States

Headings are not clickable by default and therefore do not have interactive states, but they can have states based on their visibility or viewport:

• Default: The standard visibility state.
• Hidden: In cases where the heading is present for screen readers but visually hidden.

Gaps and Sizes

Container width and height: Hugs the content/adapts to the size of Label text, therefore container heights for the levels are as follows:

• Cover title: 2XL
• H1: XL
• H2: Lplus
• H3: L
• H4: Mplus
• H5: M
• H6: M
• H7: S

Tokens

SCSS Variable

Value

$heading-color

--bds-brand-primary-color

$heading-light-color

--color-grey-98

$heading-dark-color

--color-grey-54

INFO

The use of color and text decoration (like underlines) can be overridden based on the project's needs and style guidelines. However, it's essential to maintain sufficient contrast between the text and background for readability and accessibility.

Properties

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

Configurations

Heading
		Level 1	Level 2	Level 3	Level 4	Level 5	Level 6	Level 7
	Deafault color	Heading	Heading	Heading	Heading	Heading	Heading	Heading
Types
	Light	Heading	Heading	Heading	Heading	Heading	Heading	Heading
	Dark	Heading	Heading	Heading	Heading	Heading	Heading	Heading