Protection
InfoStepCard
One card of "O que acontece agora" on the first day (Figma "Info Step Card" 2130:11605): an overline with icon (when), a title (what happens) and a body (what it means for privacy).
Three in a row on desktop, stacked on phone; it fills its grid cell (340 px by default).
<InfoStepCard icon={<Clock />} overline="Hoje" title="A Dinda entende o que é normal pra Lia" body="Ela analisa as últimas semanas pra não te avisar à toa." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Info Step Card
string
string
string
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).
Info Step Card ·
| Info Step Card |
|---|
Hoje A Dinda entende o que é normal pra LiaEla analisa as últimas semanas pra não te avisar à toa. Nada disso vira algo que você possa ler. |
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 |
|---|---|---|---|
| icon? | ReactNode | — | Figma "icon" (INSTANCE_SWAP): a lucide element, decorative. |
| overline | string | — | Figma "overline": when it happens, "Hoje". |
| title | string | — | Figma "title": what happens. |
| body? | string | — | Figma "body": what it means for privacy. |
| headingLevel? | 2 | 3 | 4 | 3 | Outline level of the title (3 under a section heading "O que acontece agora"). |
| className? | string | — |