Card

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

Example

Card title

Radius, blur and shadow come from the shared tokens.

<div class="lucent-card" style="width:280px">
  <strong>Card title</strong>
  <p style="margin:0;opacity:.7;font-size:14px">Radius, blur and shadow come from the shared tokens.</p>
</div>

Using it

Angular lucent-card
import { LucentCard } from '@design-foundry/lucent-angular';
Stylesheet .lucent-card
@design-foundry/lucent-styles/core.css

Theming

Color (3)
Size & spacing (2)
Border & radius (1)
Shadow (1)