Basics

Cards

Group related content and actions in a shared surface.

Card surfaces

The Figma card set uses a bordered white surface and a muted comparison state.

Personality traits

Level 3 · Single profile

Current

IntroversionExtroversion

Comparison state

Muted surface from the Figma card variant

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Card

import { Card, CardHeader, CardTitle, CardContent } from '@wafm/ui/components/card'

<Card>
  <CardHeader><CardTitle>Team profile</CardTitle></CardHeader>
  <CardContent>Analysis content</CardContent>
</Card>

children / className: Compose CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter. Use shared color tokens for variants.