Component

ImageCard

Card with an image header. Perfect for product cards, blog posts, and media content.

tsx

import { ImageCard } from 'wss3-forge'

Usage

•

Use for content that is visually represented by an image

•

Keep title short, use description for details

•

Add badge for status indicators (new, sale, etc.)

•

Image height can be customized

New

Product Name

$99.00

A brief description of the product

Examples

Basic Product Card

Premium Headphones

$299.00

High-quality wireless headphones with noise cancellation

tsx

1<ImageCard
2  image="https://picsum.photos/400/200"
3  title="Premium Headphones"
4  subtitle="$299.00"
5  description="High-quality wireless headphones with noise cancellation"
6/>

With Badge

New

Limited Edition

$199.00

Exclusive limited edition product

tsx

1<ImageCard
2  image="https://picsum.photos/400/200"
3  title="Limited Edition"
4  subtitle="$199.00"
5  badge={<Badge variant="success">New</Badge>}
6  description="Exclusive limited edition product"
7/>

With Actions

Blog Post Title

5 min read

An interesting article about web development

tsx

1<ImageCard
2  image="https://picsum.photos/400/200"
3  title="Blog Post Title"
4  subtitle="5 min read"
5  description="An interesting article about web development"
6  actions={
7    <HStack gap="sm">
8      <Button size="sm" variant="primary">Read More</Button>
9      <IconButton icon={<Bookmark20Regular />} variant="ghost" />
10    </HStack>
11  }
12/>

Product Grid

Product 1

$99.00

Sale

Product 2

$149.00

tsx

1<Grid columns={{ xs: 1, sm: 2, md: 3 }} gap="md">
2  <ImageCard image="..." title="Product 1" subtitle="$99" />
3  <ImageCard image="..." title="Product 2" subtitle="$149" badge={<Badge variant="error">Sale</Badge>} />
4  <ImageCard image="..." title="Product 3" subtitle="$199" />
5</Grid>

Grid

StatCard

Last updated: December 2025