Heading

Semantic h1–h6 in Merid's heading style: weight 600, negative tracking and text-wrap: balance. The visual size is independent of the level, so the outline stays correct while the design stays consistent.

<Heading level={2}>Ship calmer interfaces</Heading>

Import

import { Heading } from "@merid/react";

Examples

Default sizes

Each level has a default size: level 1 is display, 2 is h2, 3 is h3, and 4–6 map to lg, md and sm.

<Heading level={1}>Display</Heading>
<Heading level={2}>Heading h2</Heading>
<Heading level={3}>Heading h3</Heading>
<Heading level={4}>Heading lg</Heading>
<Heading level={5}>Heading md</Heading>
<Heading level={6}>Heading sm</Heading>

Size independent of level

Pick level from the document outline and size from the design. A settings panel title may be an h2 that looks like a small heading.

<Heading level={2} size="lg">Billing history</Heading>
<Heading level={3} size="sm">Invoices</Heading>

API reference

Heading forwards its ref to the heading element and passes other HTML attributes through.

Styling

Sizes read the typography tokens (see Typography); there are no heading-specific variables.

Accessibility

• Keep one h1 per page and do not skip levels going down; change size, not level, to adjust the look.
• Never use a heading only for large text — use Text with size="lg".

Guidelines

Related

• Text — body copy and captions.
• VisuallyHidden — headings that only assistive tech needs.