UI: Components

Product Card

Product Card is a component that displays a product with an image, title, description, price, and an optional action button. You can use multiple images — a styled scrollbar will appear if there are more than one image.

Also used in Product Grid and Product List Grid.

Random image Random image

This is a product

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies.

$199.00
$99.00


With opposite color-scheme

Random image Random image

This is a product

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies.

$199.00
$99.00


With right-to-left

Random image Random image

This is a product

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies.

$199.00
$99.00