TileWall

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Tile Wall

Seu filho está online. A Superdinda ajuda você a saber quando algo merece atenção.

audience

layout

className

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Layout	Tile Wall
Desktop	Proteja seu filho sem invadir a privacidade dele. Seu filho está online. A Superdinda ajuda você a saber quando algo merece atenção.
Phone

Layout	Tile Wall
Desktop	Proteja seu pai sem invadir a privacidade dele. Seu pai recebe golpe todo dia. A Superdinda ajuda você a saber quando algo merece atenção.
Phone

Layout	Tile Wall
Desktop	Proteja sua avó sem invadir a privacidade dela. Sua avó recebe golpe todo dia. A Superdinda ajuda você a saber quando algo merece atenção.
Phone

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

TileWallRootProps

Prop	Tipo	Padrão	Descrição
audience?	TileWallAudience	"child"	Figma `Audience`. Change it to rotate the wall: each cell slides its new tile in, and holds still under reduced motion.
layout?	"desktop" \| "phone" \| null	"desktop"
className?	string	—
children?	ReactNode	—	Desktop: the TileWall.Text block (it sits after the 11th tile). The phone band has no text: put one line under it instead.

TileWallTextProps

Prop	Tipo	Padrão	Descrição
headline	ReactNode	—	Who it is for, in one sentence ("Proteja seu filho sem invadir a privacidade dele.").
body?	ReactNode	—	The line under it.
headlineRender?	ReactElement<unknown, string \| React.JSXElementConstructor<any>>	—	The headline element: an `<h2>` by default; `<p />` where the page already has its outline.
className?	string	—