UI: Components

Product Grid

Product Grid is a component that displays a grid of products similar to a table. Used here with Product Card and Testimonial.

By default, the grid is set to showcase 1 > 2 > 3 columns based on width. As 12 is divisible by 1, 2, and 3 — it's advisable to include 12 products/items per page.

This is a product

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

$199.00
$99.00

Add to cart

This is a product

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

$199.00
$99.00

Pre-order

You must be the change you wish to see in the world Mahatma Gandhi
Nonviolent resistance

With opposite color-scheme

This is a product

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

$199.00
$99.00

Add to cart

This is a product

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

$199.00
$99.00

Pre-order

You must be the change you wish to see in the world Mahatma Gandhi
Nonviolent resistance

With right-to-left

This is a product

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

$199.00
$99.00

Add to cart

This is a product

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

$199.00
$99.00

Pre-order

You must be the change you wish to see in the world Mahatma Gandhi
Nonviolent resistance