Listing cards

Inspect

Default

Inspect

States

Inspect

Status variants

Inspect

Draft variant

Inspect

Grid layouts

Inspect

Compound API

ComponentPropsDescription
<ListingCard>listing, locale, showSeller?Root provider. Computes URL, image, pricing, and shares via context.
<ListingCardImage>children?Image area with link. Overlay children (Favorite, Status) are positioned absolutely.
<ListingCardFavorite>isFavoriteThe card's heart. Caller passes the favorite state; the heart saves it for the card's listing.
<ListingCardStatus>—Status badge overlay. Auto-shows/hides based on listing.status.
<ListingCardContent>childrenText area wrapper. Handles seller hover animation when showSeller is true.
<ListingCardTitle>—Linked item name. Truncates with ellipsis.
<ListingCardAttributes>—Brand, size, condition metadata row.
<ListingCardPrice>—Formatted price. Auto-hides for cancelled items.
<ListingCardSeller>—Composition marker. Seller overlay is rendered by ListingCardContent when showSeller is true.
<ListingCardActions>deleteActionEdit/delete actions. Draft items show "Continue editing" + delete. Non-deletable statuses hide the delete button.

Listing data shape (ListingCardListing)

FieldTypeDescription
idstringUnique listing ID
publicIdnumberPublic-facing numeric ID used in URLs
namestringItem title displayed on card
descriptionstring | nullOptional item description
priceCentsnumberPrice in minor units
marketMarketIdThe listing's market; drives the currency the price is formatted in
slugstring | nullURL-friendly slug, appended to /items/publicId-
imageUrlstring | nullLegacy fallback image URL (used when listingImages is empty)
listingImagesArray | nullOrdered image array with url, altText, and rotation. First image is used as cover.
brand{ name } | nullBrand from brands table
customBrandNamestring | nullFree-text brand name fallback when brand is null
condition{ name } | nullItem condition (new, like new, good, fair, poor)
sizeLabelstring | nullSize displayed in the metadata row (e.g. "M", "42", "G")
deliveryCostCentsnumber | nullDelivery cost in minor units
freeShippingboolean | nullWhen true, delivery cost is excluded from price
favoritesCountnumber | nullNumber of favorites for the heart button
statusstringItem status (available, sold, reserved, shipped, delivered, draft, cancelled). Drives URL, StatusBar, Price visibility, and Actions layout.