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

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>

Click me!

tsx

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

Subtle background for nested content

tsx

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

IconButton

Grid

Last updated: December 2025