Component

Card

Cards are containers for content and actions. Use different variants and padding sizes.

tsx
import { Card } from 'wss3-forge'

Usage

Use cards to group related content together

Use subtle variant for nested cards or less prominent sections

Add hoverable prop for interactive cards that navigate somewhere

Use title and subtitle props for consistent header styling


Default card with content
Subtle variant
Hoverable card

Examples

With Title and Action

My Card

Description

Content here
tsx
1<Card
2 title="My Card"
3 subtitle="Description"
4 action={{ label: 'View all', onClick: () => {} }}
5>
6 Content here
7</Card>

Hoverable Card

Click me!
tsx
1<Card hoverable onClick={() => console.log('clicked')}>
2 Click me!
3</Card>

Subtle Variant

Subtle background for nested content
tsx
1<Card variant="subtle" padding="lg">
2 Subtle background for nested content
3</Card>

Previous

IconButton

Next

Grid

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.