PersonHeader
The top of a person's page (Figma "Person Page Header" 2058:62926): the figure on the state colour, relation, name, protection status, a calm description and up to two actions.
Desktop puts the 290 px art beside the text; Phone puts a 112 px art beside the name (Art=Beside) or a 238 px figure across the top (Art=Full). Below ~600 px the desktop art wraps onto its own row and the actions fill the width (responsive-fix 2026-10-19). The status is icon + word; the description says what the Superdinda does, never what it reads.
<PersonHeader state="protecting" audience="elder-woman" overline="Sua sogra · 76 anos"
name="Marlene" meta="desde 02/10" primaryAction={<Button variant="brand">Ligar pra Marlene</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Person Page Header
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Size · Desktop
| Art | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Beside | Sua sogra · 76 anos MarleneProtegendo desde 02/10 · a Dinda checou hoje às 14:08 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePrecisa de você chegou um alerta hoje às 14:02 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneSem conexão o WhatsApp desconectou ontem às 22:10 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePausada pausada até amanhã, 19/10, às 14:30 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneEsperando pedido enviado hoje às 10:14 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. |
Size · Phone
| Art | Protegendo | Precisa de você | Sem conexão | Pausada | Esperando |
|---|---|---|---|---|---|
| Beside | Sua sogra · 76 anos MarleneProtegendo desde 02/10 · a Dinda checou hoje às 14:08 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePrecisa de você chegou um alerta hoje às 14:02 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneSem conexão o WhatsApp desconectou ontem às 22:10 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePausada pausada até amanhã, 19/10, às 14:30 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneEsperando pedido enviado hoje às 10:14 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. |
| Full | Sua sogra · 76 anos MarleneProtegendo desde 02/10 · a Dinda checou hoje às 14:08 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePrecisa de você chegou um alerta hoje às 14:02 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneSem conexão o WhatsApp desconectou ontem às 22:10 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarlenePausada pausada até amanhã, 19/10, às 14:30 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. | Sua sogra · 76 anos MarleneEsperando pedido enviado hoje às 10:14 A Dinda procura golpes no WhatsApp da Marlene. Você só recebe um alerta quando algo parece golpe; o resto das conversas continua só dela. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| size? | "desktop" | "phone" | null | "desktop" | |
| state? | PersonHeaderState | "protecting" | Figma "State": the art ground and the status follow it. |
| art? | "beside" | "full" | "beside" | Figma "Art": `full` puts a 238 px figure across the top (Phone only; Desktop always keeps the 290 px art beside the text). |
| audience? | Audience | "elder-woman" | Who the figure shows (Person Tile "Audience"). |
| overline? | string | — | Figma "overline": the relation, "Sua sogra · 76 anos". |
| name | string | — | Figma "name", the page title. |
| headingLevel? | 1 | 2 | 3 | 1 | Outline level of the name. The page title by default. |
| statusLabel? | string | — | Replaces the status word ("Abriu o link às 10:40"); the glyph stays. |
| meta? | string | — | Figma "meta": since when, last check. |
| description? | string | — | Figma "description" (`showDescription`). |
| back? | ReactNode | — | Figma "Back" (`showBack`): a link back, e.g. "Família". |
| primaryAction? | ReactNode | — | Figma "Primary action": a Button (Brand). |
| secondaryAction? | ReactNode | — | Figma "Secondary action": a Button (Outline). |
| className? | string | — |