Heading

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

Figma Library View in Storybook View in Playroom API Reference

Quick Start

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

Basic Usage

Heading requires an as prop (h1–h6) — it renders that semantic element and defaults to a matching visual size (h1 → text-heading-32 down to h6 → text-heading-12). The fontWeight, lineClamp, textAlign, textTransform, tone, and typography props are deprecated — always reach for a utility class below instead of a prop, even though the props still exist on the type.

Hello world

<Heading as="h1">Hello world</Heading>

View in Playroom

Typography (override the default size)

Hello world

<Heading as="h3" className="text-heading-32">Hello world</Heading> {/* 32px / 48px line-height */}
<Heading as="h3" className="text-heading-28">Hello world</Heading> {/* 28px / 40px line-height */}
<Heading as="h3" className="text-heading-24">Hello world</Heading> {/* 24px / 32px line-height */}
<Heading as="h3" className="text-heading-20">Hello world</Heading> {/* 20px / 28px line-height */}
<Heading as="h3" className="text-heading-18">Hello world</Heading> {/* 18px / 26px line-height */}
<Heading as="h3" className="text-heading-16">Hello world</Heading> {/* 16px / 24px line-height */}
<Heading as="h3" className="text-heading-14">Hello world</Heading> {/* 14px / 22px line-height */}
<Heading as="h3" className="text-heading-12">Hello world</Heading> {/* 12px / 20px line-height */}

View in Playroom

Font weight

Hello world

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

View in Playroom

Text align

Prefer logical properties (start/end) over left/right for automatic RTL support.

Hello world

<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>

View in Playroom

Text transform

sPoNgEbOb

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

View in Playroom

Tone (color)

See the Color foundation for the full palette.

Hello world

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

View in Playroom

Line clamp

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-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>

View in Playroom

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

<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

<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

<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.

<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

<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

<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

<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

Prop	Default	Description
`as`	_	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` Heading element to render
`children`	_	`React.ReactNode` The content of the component
`className?`	_	`string` CSS class name applied to the root element
`style?`	_	`React.CSSProperties` Inline styles applied to the root element
~~`typography?`~~	_	⚠️ Deprecated, use text utility classes instead, e.g. `text-heading-32`, `text-heading-28`, `text-heading-24`, `text-heading-20`, `text-heading-18`, `text-heading-16`, `text-heading-14`, `text-heading-12`.
~~`tone?`~~	_	⚠️ Deprecated, use text color utility classes instead, e.g. `text-accent`, `text-accent-hover`, `text-accent-pressed`, `text-primary`, `text-secondary`, `text-tertiary`, `text-secondary-hover`, `text-disabled`, `text-disabled-secondary`, `text-onPrimary`, `text-onPrimary-disabled`, `text-critical`, `text-critical-onPrimary`, `text-critical-secondary`, `text-inverse`, `text-inverse-secondary`, `text-inverse-caution`, `text-inverse-positive`, `text-inverse-critical`, `text-inverse-accent`, `text-positive`, `text-positive-secondary`, `text-caution`, `text-caution-secondary`, `text-link`, `text-link-hover`, `text-link-pressed`.
~~`fontWeight?`~~	_	⚠️ Deprecated, use font-weight utility classes instead, e.g. `font-regular`, `font-strong`, `font-stronger`.
~~`textAlign?`~~	_	⚠️ Deprecated, use text-align utility classes instead, e.g. `text-start`, `text-center`, `text-end`.
~~`textTransform?`~~	_	⚠️ Deprecated, use text-transform utility classes instead, e.g. `uppercase`, `lowercase`, `capitalize`, `normal-case`.
~~`lineClamp?`~~	_	⚠️ Deprecated, use line-clamp utility classes instead, e.g. `line-clamp-1`, `line-clamp-2`, `line-clamp-3`, `line-clamp-4`.

Heading

Quick Start

Basic Usage​

Hello world

Typography (override the default size)​

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Font weight​

Hello world

Hello world

Hello world

Text align​

Hello world

Hello world

Hello world

Text transform​

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

Tone (color)​

Hello world

Hello world

Hello world

Hello world

Hello world

Line clamp​

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 Level​

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Typography​

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Font Weight​

Hello world

Hello world

Hello world

Line Clamp​

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.

Text Align​

Hello world

Hello world

Hello world

Text Transform​

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

sPoNgEbOb

Tone​

Hello world

Hello world

Hello world

Hello world

Hello world

API Reference​

Heading

Basic Usage

Typography (override the default size)

Font weight

Text align

Text transform

Tone (color)

Line clamp

Heading Level

Typography

Font Weight

Line Clamp

Text Align

Text Transform

Tone

API Reference