# Section Header

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

Source: https://ritla.app/ui/section-header

## Installation

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

```bash
npx ritla add section-header
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/section-header
```

## Usage

```tsx
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.

Live preview: https://ritla.app/_kanz/preview/ltr/section-header-parts

## 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 as in left-to-right; arrows swap in right-to-left):

- `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`.