WellSourced

Product card

The composed surface that shows up in search results and on brand pages. Image, brand eyebrow, title, price, trust badge, and a direct-to-brand CTA.

Independently audited
Oyama Denim

XX-002 Selvedge Jeans

$298
Buy direct

Usage#

  • Price is always visible. Never “See price” or “Contact for pricing”. If we don't have a price, we don't list the product.
  • The CTA goes to the brand's store. WellSourced is never in the transaction path. “Buy direct” opens in a new tab.
  • Trust badge sits top-left. Always. Never hide it behind an “i” icon; verification is a feature.
  • Image is 4:3. Swappable to 1:1 for category grids, but within a row all cards share the same aspect.

Props#

NameTypeDefaultDescription
title*string—Product name.
brand*string—Brand display name.
price*string—Formatted price string, e.g. "$128".
tier*"t1" | "t2" | "t3"—Verification tier.
imagestring—Product image URL. Placeholder shown when omitted.
buyUrl*string—Direct link to the brand's store. Opens in new tab.

Code#

tsx
import { ProductCard } from "@/components/ui/ProductCard";

<ProductCard
title="XX-002 Selvedge Jeans"
brand="Oyama Denim"
price="$298"
tier="t3"
image="/products/oyama-xx002.jpg"
buyUrl="https://oyama-denim.example.com/products/xx-002"
/>