Heading

Having a clear structure to your UI in general makes it easier for users to navigate each page. Headings help users process the structure and accomplish their goals.

Headings work best when they follow a clear hierarchy (not skipping any levels) and represent the real structure (aren’t just decorative or using size for emphasis).

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Sketch

Released

Content structure

Heading types

Headings are split based on size and appearance into seven different types. These types represent a visual hierarchy from most important to least.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Separator from "@kiwicom/orbit-components/lib/Separator";

<Stack>
  <Heading type="display">Display title</Heading>
  <Heading type="displaySubtitle">Display subtitle</Heading>
  <Separator />
  <Heading type="title1">Title 1</Heading>
  <Heading type="title2">Title 2</Heading>
  <Heading type="title3">Title 3</Heading>
  <Heading type="title4">Title 4</Heading>
  <Heading type="title5">Title 5</Heading>
</Stack>

There is also one additional color for use on very dark backgrounds. This is the only color for headings other than colorHeading.

import Heading from "@kiwicom/orbit-components/lib/Heading";

<div
  style={{
  backgroundColor: "#252A31",
  padding: "8px",
  }}
>
  <Heading inverted>Inverted heading</Heading>
</div>

Guidelines

See also the general guidelines in Typography.           

Stick to the hierarchy

Start with either a Title 1 or Display heading. Then use Title 2 and so on. Don’t skip around in the hierarchy or you’ll confuse users.

Choose a Display heading for screens with lots of content and Title 1 otherwise. Generally, don’t use both on the same screen.

  # Respect the hierarchy

Create semantic structure

Your beautiful visual hierarchy can be really helpful for those who can see it, but remember that not everyone will be able to see it. Make sure everyone gets the benefit of your clearly structured content by using semantic tags (such as starting with h1 and continuing).

Use only a single color

While you might be tempted to make your headings stand out even more by using various colors, resist the temptation. Trust the visual style to make it clear what is important and what isn’t.
In particular, do not use our product colors (such as Product / Normal) to make headings more prominent. Those colors are reserved for actions users can take, so using them in headings may confuse users.

  # Use heading color

Related components

Text

Heading components are good for structuring your content into clear sections. To add visual styling to those sections, use text components to get everything looking right.