Heading

Section and page titles. The level sets the h1–h6 element; size changes only the look.

Introduction

Heading renders section and page titles. level sets the element (h1–h6) and the default font size; size changes only the look. It shares variant, color, and weight with Text.

When to use: Page titles, section titles, and card or panel headings that belong in the page outline.

Compared to similar components:

• Text — Body copy, captions, and values. Do not use a large Text as a title.
• Card — Its title already renders a heading for the card.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Heading } from "@bridge-ui/vue/Components/Heading";

import { Heading } from "@bridge-ui/react/Components/Heading";

Basic usage

Without size, each level has its own font size. The default level is 2.

Size

Keep the right level for the page outline and set the look with size (the Text scale, 2xs to 4xl).

Tone, color, and weight

variant="muted" gives a secondary tone. color takes primary, secondary, success, info, warning, error, dark, and black; the default stays dark because global.defaultColor does not apply. weight defaults to semibold.

Defaults and tokens

Set app-wide defaults with components.Heading.defaultProps (color, size, variant, weight). components.Heading.tokens.level sets the font size per level. See Default props and Tokens.

components: {
  Heading: {
    defaultProps: { weight: "bold" },
    tokens: { level: { "1": "text-4xl", "2": "text-3xl" } },
  },
}

Accessibility

• Pick level from the page outline, not from the size you want. Start each page with one h1 and do not skip levels.
• Use size when a heading must look smaller or larger than its level.

Anatomy

Heading renders a single heading element for its level:

<h2>…</h2> <!-- root (h1–h6 from `level`) -->

Related components

Text, Card, EmptyState

API