Product Card

Your main element, this card will showcase your product with a quick look at its category and options.

• Component: <ProductCard/>

• Path: /components/layout/product-card.tsx

• Import:

import { ProductCard } from "@/components/layout/product-card";

Product Card with X link

The card displays:

• Label

• "Owner" (links to X if it starts with @)

• Image

• Tagline

• Category

• Options (links/filters)

• Rating / favorite actions if flip effect is selected

It's clickable and will get you to the product own page.

Sizing

Different sizes are available to fit your products, simply set the "cards" value to "large" in metadata file:

data/config/metadata.js

const metadata = {
 ...
cards: "large", // "default" | "large" | "vertical"
...
};

module.exports = { metadata };

Large Cards

Responsive and number of cards per column will be automatically updated for pre-defined sizes.

Flip Effect

For a clean minimalist deign, you can opt for flipping cards.

Front card will show image only, and back will appear on hover with all infos and actions (rating & favorite):

data/config/metadata.js

const metadata = {
 ...
enableFlipCards: true, // Set to true to enable flip functionality
...
};

module.exports = { metadata };

Large Cards

The vertical layout + flip effect is perfect for books for example!