Component · Containers

Card

the frosted-glass surface that groups content and lifts it off the canvas.

Example

Card title

A token-driven surface — radius, blur and shadow from the shared tokens.

Where available

React
Angular
Web Components
Blazor
Tokens

Using it

the same component, named idiomatically per target. one CSS contract underneath, so they render identically.

TargetReferencePackage
React <Card> @design-foundry/lucent-react
Angular <lucent-card> @design-foundry/lucent
Web Components <lucent-card> @design-foundry/lucent-wc
Blazor <LucentCard> DesignFoundry.Lucent

API

PropTypeDefaultDescription
(children) slotted card content.