HeroStatement
The home's opening sentence (Figma "Hero Statement" 2056:51454): overline with the date, one Display sentence that says how the family is ("A Lia precisa de você hoje."), support copy and up to two chips.
Desktop sets the sentence in Display/Stage within an 860 px column, Phone in Display/Stage Phone. Narrow widths: the sentence column keeps at least 240 px and the chips wrap below it.
<HeroStatement overline="Domingo, 18 de outubro · 16:30" sentence="A Lia está protegida." support="Nada pediu sua atenção hoje." chips={<Badge tone="muted" size="micro" icon={<Users />}>A Mariana também foi avisada</Badge>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Hero Statement
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
| Hero Statement |
|---|
Domingo, 18 de outubro · 16:30 A Lia precisa de você hoje.Chegou um alerta de possível aliciamento. Converse com ela com calma. A Mariana também foi avisada |
Size · Phone
| Hero Statement |
|---|
Domingo, 18 de outubro · 16:30 A Lia precisa de você hoje.Chegou um alerta de possível aliciamento. Converse com ela com calma. A Mariana também foi avisada |
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" | |
| overline? | ReactNode | — | Figma "overline": the date and time ("Domingo, 18 de outubro · 16:30"). |
| sentence | ReactNode | — | Figma "sentence": the one calm sentence the home opens with. |
| support? | ReactNode | — | Figma "support" (showSupport): one or two lines under it. |
| chips? | ReactNode | — | Figma "Chip" and "Chip 2" (showChip, showChip2): one or two Badges (Muted, Micro, with an icon). They sit bottom-right on desktop and wrap under the text when narrow. |
| back? | ReactNode | — | Figma "Back" (showBack): a ghost "Início" link above the overline. |
| level? | 1 | 2 | 1 | Outline level of the sentence; 1 on the home. |
| className? | string | — |