Heading

Heading renders semantic heading elements (h1–h6) with Davis typography tokens, ensuring consistent visual hierarchy.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Heading } from '@libretexts/davis-react';

export default function Example() {
  return (
    <>
      <Heading level={1}>Page Title</Heading>
      <Heading level={2}>Section Heading</Heading>
      <Heading level={3}>Subsection</Heading>
    </>
  );
}

When to use

• Heading — Use for page titles, section headers, and any content that establishes hierarchical structure. Always use levels sequentially (don't skip from h1 to h3).
• Text — Use for body copy and non-heading content that doesn't need hierarchical semantics.