Heading

Usage

• Use Heading 1–3 to structure a page into sections; keep levels in order without skipping.
• Use a toggle heading when a long section should be collapsible.
• Use Heading 4 sparingly for small sub-sections inside dense pages.
• Don’t use headings for emphasis inside running text; use bold marks instead.
• Don’t use a heading as the page title; use Page title.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { BlockContent, Heading, rt } from '@krackedui/motion';

export function HeadingExample() {
  return (
    <BlockContent>
      <Heading level={1} text={rt('Heading 1')} />
      <Heading level={2} text={rt('Heading 2')} />
      <Heading level={3} text={rt('Heading 3')} />
      <Heading level={4} text={rt('Heading 4')} />
    </BlockContent>
  );
}

Examples

Toggle heading

With toggleable, a 24px disclosure triangle sits before the text and children show when open. An open toggle heading without children shows the “Empty toggle” hint, and its triangle is at 50% opacity.

Color

API Reference

Heading

Based on <div> and supports its props. Adds:

headingVariants

tv slots root, pad, leaf with variant level, for custom heading markup.

Accessibility

• Each heading is a role="heading" with aria-level one below its block level (the page title is the h1): Heading 1 is level 2 … Heading 4 is level 5, so the page has a real heading outline.
• The toggle triangle is the DisclosureToggle button with aria-expanded; Enter / Space toggle it.