Card

Plocha, na které obsah stojí — ne rámeček, který se kreslí kolem něj. Umí se zvednout při najetí a jednou za obrazovku se obrátit do tmavé.

Kdy použít

Obsah patří k sobě a má se vizuálně oddělit od zbytku obrazovky — panel nastavení, shrnutí, dlaždice v přehledu.
Potřebuješ hlavičku s nadpisem: CardHeader a CardTitle jedou s ní a drží stejné odsazení.
Dlaždice, která někam vede — hover ji při najetí zvedne. Samotná karta klikatelná není: obal ji <a>, nebo <button>.
Sdělení platformy, které má přebít okolí — tone="dark". Obrátí plochu, takže druhá taková karta vedle už nepřebije nic.

Kdy nepoužít

Karta by obsahovala jedinou další kartu. Vnořené plochy čtenáři neřeknou nic navíc a odsazení se sčítá, dokud obsah nezmizí uprostřed.
Chceš jen odsazení. Na to je className na obalu; karta navíc kreslí okraj a pozadí, které tam nikdo nechtěl.

Vlastnosti

elevation: "flat" | "raised" — Jak moc plocha vystupuje. Výchozí flat.
hover: boolean — Zvedne kartu při najetí. Jen pro klikatelné dlaždice — a ta dlaždice musí být odkaz nebo tlačítko.
tone: "default" | "dark" — Obrácená plocha pro sdělení platformy. Na obrazovce nejvýš jedna.
padded: boolean — Vypni, když si obsah odsazení řídí sám (tabulka přes celou kartu).
className: string — Průchozí třída — na rozvržení, ne na přebarvení.