# DetailHeader

> Header of a record screen (an applicant, a person, a student): picture, name, status, facts and actions in one block.

Source: https://ui.jcsoftdev.com/docs/components/detail-header

Header of a record screen (an applicant, a person, a student): picture, name, status, facts and
actions in one block. It is the record's heading, not the page's: keep the page title in
`PageHeader` and put this under it, or let it be the first thing of a detail pane.

## Import

```ts
import { DetailHeader } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/detail-header`.

## Usage

```tsx
<DetailHeader
  name="Ana Torres"
  subtitle="Applicant 2041 · Grade 3"
  avatar={<Avatar name="Ana Torres" size="lg" className="size-14 text-fs-150" />}
  status={<Chip tone="warning">In review</Chip>}
  actions={<>
        <Button variant="secondary">Request documents</Button>
        <Button>Approve</Button>
      </>}
  facts={<Facts>
        <div>
          <dt>Guardian</dt>
          <dd>Rosa Quispe</dd>
        </div>
        <div>
          <dt>Applied</dt>
          <dd>12 Oct 2026</dd>
        </div>
        <div>
          <dt>Previous school</dt>
          <dd>San Martín</dd>
        </div>
      </Facts>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` * | `ReactNode` |  | The record's name: the heading of the header. |
| `avatar` | `ReactNode` |  | Picture slot before the name, usually an `Avatar` (pass `className="size-14"` for a larger one). |
| `subtitle` | `ReactNode` |  | Line under the name: a role, a code, a relationship. |
| `status` | `ReactNode` |  | Status next to the name: a `Chip` or `StatusPill`. Wraps under the name when narrow. |
| `facts` | `ReactNode` |  | Key facts row under the header, usually a `Facts` list. |
| `actions` | `ReactNode` |  | Buttons for the record. They wrap under the name when the header's own width is 480px or less. |
| `headingLevel` | `2 \| 1 \| 4 \| 3 \| 5 \| 6` | `2` | Level of the name heading. Defaults to `2`, the level under the page's `h1`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-detailheader--default)
- [Name Only](/storybook/?path=/story/containers-detailheader--name-only)
- [Narrow](/storybook/?path=/story/containers-detailheader--narrow)

## Source

`packages/ui/src/containers/detail-header/detail-header.tsx`