Heading

The heading component is used to communicate hierarchy between sections of content.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Heading } from '@adaptavant/eds-core';

Heading Level​

Skipping heading levels can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

Since the heading level is contextual, you must provide the heading element with the Heading component with an as prop so that it knows what to render:

Hello world

Hello world

Hello world

Hello world

Hello world
Hello world
<Stack>
  <Heading as="h1">Hello world</Heading>
  <Heading as="h2">Hello world</Heading>
  <Heading as="h3">Hello world</Heading>
  <Heading as="h4">Hello world</Heading>
  <Heading as="h5">Hello world</Heading>
  <Heading as="h6">Hello world</Heading>
</Stack>
View in Playroom

Typography​

We try to provide sensible default styles for the Heading component based on the as prop, but sometimes a heading is visually more or less important, so you can override the default styles with the Tailwind utility classes.

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

<Stack>
  {/*
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-32" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-28" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-24" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-20" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-18" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-16" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-14" as="h3">
    Hello world
  </Heading>

  {/*
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    */}
  <Heading className="text-heading-12" as="h3">
    Hello world
  </Heading>
</Stack>
View in Playroom

Font Weight​

Use our custom font-weight utilities to change the weight of text. These utilities are brandable, allowing them to map to different weights across various brands.

Hello world

Hello world

Hello world

<Stack>
  <Heading className="font-regular" as="h3">
    Hello world
  </Heading>
  <Heading className="font-strong" as="h3">
    Hello world
  </Heading>
  <Heading className="font-stronger" as="h3">
    Hello world
  </Heading>
</Stack>
View in Playroom

Line Clamp​

Clamp the text to a specific number of lines.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<Heading as="h3" className="line-clamp-1 text-heading-16">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a
  lung disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Heading>
<Heading as="h3" className="line-clamp-2 text-heading-16">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a
  lung disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Heading>
<Heading as="h3" className="line-clamp-3 text-heading-16">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a
  lung disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Heading>
<Heading as="h3" className="line-clamp-4 text-heading-16">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a
  lung disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Heading>
View in Playroom

Text Align​

Set the alignment of an element using our utility classes. Prefer logical properties (such as start instead of left and end instead of right), for automatic support in right-to-left languages.

Hello world

Hello world

Hello world

<Stack className="w-full items-stretch">
  <Heading as="h3" className="text-start">
    Hello world
  </Heading>
  <Heading as="h3" className="text-center">
    Hello world
  </Heading>
  <Heading as="h3" className="text-end">
    Hello world
  </Heading>
</Stack>
View in Playroom

Text Transform​

Transform the text casing.

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

<Stack>
  <Heading className="uppercase" as="h3">
    sPoNgEbOb
  </Heading>
  <Heading className="lowercase" as="h3">
    sPoNgEbOb
  </Heading>
  <Heading className="capitalize" as="h3">
    sPoNgEbOb
  </Heading>
  <Heading className="normal-case" as="h3">
    sPoNgEbOb
  </Heading>
</Stack>
View in Playroom

Tone​

Use our utility classes to control the color of your Heading label.

Hello world

Hello world

Hello world

Hello world

Hello world

<Stack>
  <Heading className="text-accent" as="h3">
    Hello world
  </Heading>
  <Heading className="text-critical" as="h3">
    Hello world
  </Heading>
  <Heading className="text-disabled" as="h3">
    Hello world
  </Heading>
  <Heading className="text-primary" as="h3">
    Hello world
  </Heading>
  <Heading className="text-secondary" as="h3">
    Hello world
  </Heading>
</Stack>
View in Playroom

API Reference​

Heading

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.