Card

Superfície arredondada. As variantes mapeiam os níveis de surface-container.

Variantes

subtle (.06)

raised (.08)

light (#fff)

import Card from "@components/Card/Card.astro";

<Card variant="subtle" pad={16}>...</Card>
<Card variant="raised" pad={16}>...</Card>
<Card variant="light" pad={16}>...</Card>
<Card variant="raised" onClick="abrir()">tocável</Card>

Props

Prop	Tipo	Padrão
`variant`	`"subtle" \| "raised" \| "light"`	"subtle"
`pad`	`number \| string`	16
`radius`	`number \| string`	16
`center`	`boolean`	false
`onClick`	`string (handler global)`	—

Equivalência M3

subtle = surface-container (.06)
raised = surface-container-high (.08)
light = inverse-surface (#fff, conteúdo escuro)