Theme Default

Components

Section Header

Opens a section of a page: a short label above a large title, with a short description and one link beside it.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add section-header

Also works with shadcn: npx shadcn@latest add @ritla/section-header

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { SectionHeader } from "@/components/ui/section-header";

<SectionHeader
  eyebrow="Blocks"
  title="From parts to whole products."
  description="Ready-made blocks for the screens Gulf products need."
  action={<TextLink href="/blocks" iconTrailing={ArrowRightIcon}>Browse all blocks</TextLink>}
/>

Examples

Only the parts a section needs

A title alone, or an eyebrow and a title with no description. The title takes heading level in the page outline.

Get the code ›

API reference

SectionHeader

Prop	Type	Default	Description
`title`	`ReactNode`	None	The section's title.
`level`	`1 \| 2 \| 3`	`2`	The title's heading level in the page outline.
`eyebrow`	`ReactNode`	None	A short label above the title.
`description`	`ReactNode`	None	One or two sentences beside the title, below it on a phone.
`action`	`ReactNode`	None	One link or button under the description, usually a `TextLink` to the full page.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the link or button in `action`. Nothing else in the header takes focus.

ARIA

The title is a real heading at level, so it shows in a screen reader's list of headings.
The header is a div, not a header, because a header outside a section becomes the page's banner landmark.
The eyebrow's capitals are CSS, so a screen reader reads the words as written.

Arabic and RTL notes

Mirrors

The title starts on the right, with the description and link to its left.
The link's arrow points left.

Does not mirror

The order on a phone, title then description: one column in both directions.

Numerals: The header writes no numbers itself; numbers in your text are as you pass them.
Arabic typography: The eyebrow is label-12 Medium, uppercase and tracked in English; label-14 Semibold with no case change and no tracking in Arabic, which has no capitals and whose joined letters are never spaced. The title is heading-36, heading-48 from md and heading-54 from lg.