Item cards
Card components for displaying marketplace items in grids.
Default
The item card displays a product image in 4:5 aspect ratio, item name, brand/size/condition metadata, and price. Used in grids across the marketplace.
States
Default
No image
No brand / no size
Custom brand name
Free shipping
Favorited
With actions
Long name
Cards handle missing images with a placeholder, custom brand names as fallback, free shipping pricing, pre-favorited state, and action buttons with view/edit/delete.
Status variants
Available
Sold
Shipped
Delivered
Draft
Cards show a status badge overlay when the item is not available. Cancelled items hide the price. Each status uses its configured badge variant and label from the centralized item status config.
Draft variant
Draft with actions
Draft without image
Draft with details
With seller hover
Draft items auto-detect from item.status === "draft" and link to the edit page. Include <ItemCardActions> for "Continue editing" + delete buttons. The showSeller prop controls whether seller info appears on hover.
Grid layouts
4 columns (default)
2 columns
The items grid supports 2 to 6 columns with responsive breakpoints. It starts at 2 columns on mobile and scales up.