Surfaces

Glass Card

Deprecated: use Card. GlassCard is kept until the next major version.

Deprecated

GlassCard is replaced by Card and removed in the next major version. It still works and looks the same: it renders a Card, keeps its ca-glass-card* and glass* classes, and logs a [ca-ui] warning in development.

bunx @codeatlasdev/ui migrate --write src

The codemod rewrites each static usage and leaves dynamic ones (thickness={t}) for you. GlassCard followed the theme (<html data-style>), so the replacement for an unchanged look is <Card> with material="auto", which is the default; the codemod writes material="glass" so the result is glass in every theme, as the name promised.

<!-- before -->
<GlassCard thickness="thick" tinted glowing padding="24px" title="Team">…</GlassCard>

<!-- after -->
<Card material="glass" elevation={4} tone="brand" glow p="6" title="Team">…</Card>

GlassCard	Card
`thickness="ultra-thin"` `"thin"` `"regular"` `"thick"` `"chrome"`	`elevation={1}` `{2}` `{3}` (default) `{4}` `{5}`
`tinted`	`tone="brand"`
`glowing`	`glow`
`padding="24px"`	`p="6"` (a spacing step)
`title`, `headingLevel`, `headerActions`, `href`, `target`, `flush`, `full`, `class`	unchanged

Class	Replacement
`.ca-glass-card`, `.ca-glass-card--flush`, `.ca-glass-card--full`	`.ca-card`, `.ca-card--flush`, `.ca-card--full`
`.ca-glass-card__header`, `__title`, `__header-actions`	`.ca-card__header`, `__title`, `__header-actions`