Heading

Render a page or section header with an optional strap, subtitle and meta content.

Heading is a client component ("use client") that renders a Text as a header containing an h1 title, plus an optional strap line above it and a subtitle paragraph below. Use it at the top of pages and sections. It reads theme overrides from theme.heading via styled-components' ThemeContext.

Projects

Website redesign

Last updated 2 hours ago

In review

Edit project

Import#

typescript

import { Heading } from "@reactberry/system/blocks";

Usage#

typescript

import { Heading, Tag } from "@reactberry/system/blocks";
import { Button } from "@reactberry/system/elements";

export default function ProjectHeader() {
  return (
    <Heading
      strap="Projects"
      title="Website redesign"
      subtitle="Last updated 2 hours ago"
      meta={<Tag skin="surface">In progress</Tag>}
      $size="large"
    >
      <Button variant="primary" $size="small">
        Edit project
      </Button>
    </Heading>
  );
}

Examples#

Compact section header#

Use $size="xsmall" for headers inside cards and panels.

Members

12 people

Part overrides#

elementProps passes props to the title, subtitle and strap, for example to change the title element or colour.

Billing

Invoices and payment methods

API#

Heading#

Prop	Type	Default	Description
`title`	`ReactNode`	`Page Title`	Rendered in an `h1` unless `elementProps.title.as` is set.
`subtitle`	`ReactNode`	—	Rendered in a `p` below the title when truthy.
`strap`	`any`	—	Rendered in a `div` above the title when truthy.
`meta`	`ReactNode`	—	Rendered after the subtitle.
`elementProps`	`HeadingElements`	`{}`	Per-part props keyed `title`, `subtitle` and `strap`, spread last onto each part.

Two Text props have their own handling:

Prop	Type	Default	Description
`$size`	`"xsmall""small""medium""large""xlarge""xxlarge""xxxlarge"`	`"medium"`	Selects the title and subtitle font sizes. The strap uses the subtitle size.
`color`	`string`	`"primary"`	Applied to the title only.

All other TextProps are spread onto the outer header. The type also declares a props key (props?: any); it has no special handling and is forwarded with the other props.

Accessibility#

The title is always an h1 unless overridden via elementProps.title.as. Set it when rendering more than one Heading on a page.
The outer element is a header.

Notes#

Size mapping for title / subtitle: xsmall medium / small, small large / small, medium xlarge / small, large xlarge / medium, xlarge xxlarge / medium, xxlarge and xxxlarge xxxlarge / xlarge.
Passing a $size outside the listed keys throws at render time, because the size lookup returns undefined.
Style precedence for each part is component defaults, then theme.heading.title / subtitle / strap, then elementProps. The default themes set the subtitle and strap colours, so the component's own "tertiary" subtitle and "secondary" strap colours are overridden by the theme.
The outer header receives theme.heading.container (a flex column with vertical padding in the default themes) before your props.