ProductCard
Basic Product Card
The most basic product information display card
Example Product
This is a powerful example product that provides a quality experience for users.
<ProductCard
name="Example Product"
image="/images/products/example-product.jpg"
description="This is a powerful example product that provides a quality experience for users."
productUrl="https://example.com/product"
/>Product Card with App Store Link
Provides both product website and App Store download links
<ProductCard
name="Mobile App Example"
image={getExampleImage({ width: 300, height: 200 })}
description="An excellent mobile application that lets you enjoy convenient services anytime, anywhere."
productUrl="https://example.com/app"
appStoreUrl="https://apps.apple.com/app/example"
/>Product Card with GitHub Link
For open source products, you can provide website, GitHub, and App Store links simultaneously
<ProductCard
name="Open Source Project Example"
image={getExampleImage({ width: 300, height: 200 })}
description="An excellent open source project. Contributions welcome."
productUrl="https://example.com/opensource"
githubUrl="https://github.com/example/repo"
appStoreUrl="https://apps.apple.com/app/opensource"
/>Custom Button Text
Customize button text using the primaryButtonText, secondaryButtonText, and githubButtonText properties
Custom Button Example
This product supports custom button text, providing a more flexible display method.
<ProductCard
name="Custom Button Example"
image={getExampleImage({ width: 300, height: 200 })}
description="This product supports custom button text, providing a more flexible display method."
productUrl="https://example.com/custom"
appStoreUrl="https://apps.apple.com/app/custom"
githubUrl="https://github.com/example/custom"
primaryButtonText="View Details"
secondaryButtonText="Download Now"
githubButtonText="View Source"
/>Vertical Button Layout
Set buttons to be arranged vertically using the buttonLayout="column" property
<ProductCard
name="Vertical Button Example"
image={getExampleImage({ width: 300, height: 200 })}
description="Using vertical button layout, suitable for scenarios where each action needs to be emphasized."
productUrl="https://example.com/vertical"
appStoreUrl="https://apps.apple.com/app/vertical"
githubUrl="https://github.com/example/vertical"
buttonLayout="column"
/>Equal Height Card Layout
When displaying multiple product cards in a grid or list, cards may have inconsistent heights due to different content lengths, affecting the overall aesthetics.
By setting the equalHeight property, you can ensure all cards have the same height, achieving a neat layout effect.
<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
<ProductCard
equalHeight
size="md"
name="产品一"
image={getExampleImage({ width: 300, height: 200 })}
description="这是一段很短的产品描述。"
productUrl="https://example.com/product1"
/>
<ProductCard
equalHeight
size="md"
name="产品二"
image={getExampleImage({ width: 300, height: 200 })}
description="这是一段较长的产品描述，包含更多详细信息，可能会导致卡片高度增加。使用equalHeight属性可以确保所有卡片高度一致。"
productUrl="https://example.com/product2"
appStoreUrl="https://apps.apple.com/app/product2"
/>
</div>Description Text Line Control
You can control the number of lines displayed for the description text using the descriptionLines property. Text exceeding this limit will be truncated and displayed with an ellipsis.
This is very useful for maintaining card layout consistency, especially in grid layouts.
<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
<ProductCard
size="md"
name="默认行数限制"
image={getExampleImage({ width: 300, height: 200 })}
description="默认情况下，描述文本会根据卡片尺寸自动限制行数。例如中等尺寸(md)卡片默认显示3行文本。这段文本很长，但只会显示前几行，其余部分会被截断。"
productUrl="https://example.com/product3"
/>
<ProductCard
size="md"
descriptionLines={2}
name="自定义行数限制"
image={getExampleImage({ width: 300, height: 200 })}
description="通过设置descriptionLines=2，可以将描述文本限制为最多显示2行。这段文本很长，但只会显示2行，其余部分会被截断。"
productUrl="https://example.com/product4"
/>
</div>Comprehensive Example: Grid Layout
By combining equal height cards and description line control, you can achieve a neat and aesthetically pleasing product grid layout.
<div class="cosy:grid cosy:grid-cols-3 cosy:gap-4">
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品A"
image={getExampleImage({ width: 300, height: 200 })}
description="简短的产品描述文本。"
productUrl="https://example.com/productA"
/>
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品B"
image={getExampleImage({ width: 300, height: 200 })}
description="中等长度的产品描述文本，提供一些基本信息。"
productUrl="https://example.com/productB"
appStoreUrl="https://apps.apple.com/app/productB"
/>
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品C"
image={getExampleImage({ width: 300, height: 200 })}
description="较长的产品描述文本，包含更多详细信息，但会被限制为2行显示。"
productUrl="https://example.com/productC"
githubUrl="https://github.com/example/productC"
/>
</div>Size Variants
The ProductCard component provides multiple size variants that can be selected according to different display requirements.
Available size options include: xs, sm, md, lg, and xl, with the default being md.
Extra Small Size (xs)
Suitable for sidebars or compact layouts
<ProductCard
size="xs"
name="超小尺寸产品"
image={getExampleImage({ width: 150, height: 100 })}
description="小巧精致的产品卡片，节省空间。"
productUrl="https://example.com/xs"
/>Small Size (sm)
Suitable for list pages or grid layouts
<ProductCard
size="sm"
name="小尺寸产品"
image={getExampleImage({ width: 150, height: 100 })}
description="紧凑型产品卡片，适合在列表中展示。"
productUrl="https://example.com/sm"
/>Medium Size (md) - Default
Suitable for standard product pages
<ProductCard
size="md"
name="中等尺寸产品"
image="/images/products/example-md.jpg"
description="标准产品卡片，平衡信息展示和空间占用。"
productUrl="https://example.com/md"
/>Large Size (lg)
Suitable for highlighted products
<ProductCard
size="lg"
name="大尺寸产品"
image={getExampleImage({ width: 380, height: 253 })}
description="大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。"
productUrl="https://example.com/lg"
/>Extra Large Size (xl)
Suitable for hero sections or landing pages