Products
Basic Usage
The most basic product collection display, automatically adjusting the layout based on screen size
<Products
products={[
{
name: "Product 1",
image: "/images/products/product1.jpg",
description: "This is a powerful example product that provides a quality experience for users.",
productUrl: "https://example.com/product1"
},
{
name: "Product 2",
image: "/images/products/product2.jpg",
description: "Another excellent product with innovative features and an intuitive interface.",
productUrl: "https://example.com/product2"
}
]}
/>Grid Layout
Use grid layout to display products and customize the number of columns
<Products
layout="grid"
columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
products={[
{
name: "Product 1",
image: "/images/products/product1.jpg",
description: "This is a powerful example product that provides a quality experience for users.",
productUrl: "https://example.com/product1"
},
{
name: "Product 2",
image: "/images/products/product2.jpg",
description: "Another excellent product with innovative features and an intuitive interface.",
productUrl: "https://example.com/product2"
},
{
name: "Product 3",
image: "/images/products/product3.jpg",
description: "A third excellent product that meets users' diverse needs.",
productUrl: "https://example.com/product3"
}
]}
/>List Layout
Use list layout to display products vertically
<Products
layout="list"
products={[
{
name: "Product 1",
image: "/images/products/product1.jpg",
description: "This is a powerful example product that provides a quality experience for users.",
productUrl: "https://example.com/product1"
},
{
name: "Product 2",
image: "/images/products/product2.jpg",
description: "Another excellent product with innovative features and an intuitive interface.",
productUrl: "https://example.com/product2"
}
]}
/>Custom Card Size and Spacing
Adjust product display effect by setting card size and spacing
<Products
cardSize="sm"
gap="lg"
products={[
{
name: "Product 1",
image: "/images/products/product1.jpg",
description: "This is a powerful example product that provides a quality experience for users.",
productUrl: "https://example.com/product1"
},
{
name: "Product 2",
image: "/images/products/product2.jpg",
description: "Another excellent product with innovative features and an intuitive interface.",
productUrl: "https://example.com/product2"
},
{
name: "Product 3",
image: "/images/products/product3.jpg",
description: "A third excellent product that meets users' diverse needs.",
productUrl: "https://example.com/product3"
},
{
name: "Product 4",
image: "/images/products/product4.jpg",
description: "A fourth premium product offering outstanding performance and user experience.",
productUrl: "https://example.com/product4"
}
]}
/>