Title

The <Title> component is a heading designed to live inside a container surface such as <Panel>, <Dialog>, <Drawer>, <EmptyState>, or <SectionMessage>. The container decides the heading level and how the title fits into the surrounding layout, so consumers can drop a <Title> in without thinking about it.

For top-level page headings reach for <Headline> instead.

Anatomy

A title is a single heading element with no parts of its own.

Appearance

<Title> carries no styling of its own. Its appearance comes entirely from the surrounding container, which keeps the look consistent across panels, dialogs, drawers, and other surfaces. Pair it with <Description> when the region also needs a help line.

Styling is inferred automatically from the surrounding context. See Slot-Driven Composition for how this works.

Usage

Reach for <Title> whenever a container surface labels its content with a heading. For top-level page headings or any heading that should not adapt to a surrounding container, use <Headline> instead.

A container can define the heading level, spacing, and visual style for the title region through its slot context. The consumer just writes the title text and the container takes care of the rest.

import { Description, Panel, Title } from '@marigold/components';export default () => (  <Panel>    <Panel.Header>      <Title>Storage usage</Title>      <Description>42% of your storage quota is currently in use.</Description>    </Panel.Header>  </Panel>);

Heading level

The level prop controls the rendered HTML element (<h1> to <h6>). When <Title> is used inside a container, the container supplies the level for you so the document outline stays correct without consumers having to think about it. Set level explicitly only when using <Title> outside a container, or when the document outline calls for a different level than the container's default.

Accessibility

<Title> renders a real heading element, so screen readers announce it as a heading at the level it renders. The level prop maps directly to the underlying <h1> to <h6> element, which means assistive technologies can navigate the page by headings just like they would with handwritten markup.

A Title used without a container still renders as a plain heading. It contributes to the document outline but has no programmatic relationship to anything else. Containers that pair a Title with a <Description> wire the relationship through their slot context, so consumers don't need to set aria-describedby manually.

Props

Title

Alternative components

• Headline: Use for top-level page headings or any heading that should not adapt to a surrounding container.
• Description: The help-line partner for Title in container surfaces.
• Text: Use for paragraph text and body copy.