Heading

Overview

Heading renders a semantic HTML heading (h1–h6) with the design system’s typographic styling. It separates meaning from appearance: the as prop sets the actual heading tag (for document structure and accessibility), while the optional displayAs prop lets you borrow the visual style of a different level without changing the underlying element.

Usage

Import the component:

import { Heading } from "@eqtylab/equality";

Basic usage — as is required and determines both the tag and its style:

<Heading as="h1">Page title</Heading>

HTML Headings

Each level has its own type styling. Set as to the appropriate level for its place in the document outline.

Usage

<Heading as="h1">This is an h1 heading</Heading>
<Heading as="h2">This is an h2 heading</Heading>
<Heading as="h3">This is an h3 heading</Heading>
<Heading as="h4">This is an h4 heading</Heading>
<Heading as="h5">This is an h5 heading</Heading>
<Heading as="h6">This is an h6 heading</Heading>

Display As

Use displayAs to render one semantic level while applying the visual style of another. Here an h3 is rendered with h1 styling — the element stays an <h3> in the DOM, so the heading hierarchy is preserved while the text looks larger.

Usage

<Heading as="h3" displayAs="h1">
  This is an h3 styled as h1 heading
</Heading>

Props

The component also accepts standard heading attributes (id, className, etc.).