GuideTile
A talk guide on the home (Figma "Guide Tile" 2056:51514): overline, title, body and one action, on purple or lilac.
Desktop 560 (fills a 2-column grid), Phone 358. Never put two of the same tone side by side.
<GuideTile tone="purple" overline="Pra conversar com a Lia · 13 a 17 anos" title="Segurança online sem sermão" body="Um roteiro de 5 minutos." action={<Button variant="outline" size="40" render={<NextLink href="/guias/sem-sermao" />}>Ler o guia · 5 min</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Guide Tile
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).
Tone · Purple
| Size | Guide Tile |
|---|---|
| Desktop | Pra conversar com a Lia · 13 a 17 anos Segurança online sem sermãoUm roteiro de 5 minutos sobre segredos, encontros e pedidos de foto, pra falar com quem tem 14 anos. |
| Phone | Pra conversar com a Lia · 13 a 17 anos Segurança online sem sermãoUm roteiro de 5 minutos sobre segredos, encontros e pedidos de foto, pra falar com quem tem 14 anos. |
Tone · Lilac
| Size | Guide Tile |
|---|---|
| Desktop | Pra conversar com a Lia · 13 a 17 anos Segurança online sem sermãoUm roteiro de 5 minutos sobre segredos, encontros e pedidos de foto, pra falar com quem tem 14 anos. |
| Phone | Pra conversar com a Lia · 13 a 17 anos Segurança online sem sermãoUm roteiro de 5 minutos sobre segredos, encontros e pedidos de foto, pra falar com quem tem 14 anos. |
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 |
|---|---|---|---|
| tone? | "lilac" | "purple" | null | "purple" | |
| size? | "desktop" | "phone" | null | "desktop" | |
| overline? | ReactNode | — | Figma "overline": who it is for ("Pra conversar com a Lia · 13 a 17 anos"). |
| title | ReactNode | — | Figma "title". |
| body? | ReactNode | — | Figma "body". |
| action? | ReactNode | — | Figma "Action" (showAction): an Outline button or link, e.g. "Ler o guia · 5 min" with an arrow. It sits on white in both tones. |
| level? | 2 | 3 | 4 | 3 | Outline level of the title. |
| className? | string | — |