ProductCard

The ProductCard component is used to display product information, including product name, image, description, App Store link, and product website link. The component features a card design with hover effects and provides links to product-related pages.

Features

🎨 Multiple Sizes: Supports xs, sm, md, lg, xl five preset sizes
🎯 Flexible Layout: Supports horizontal and vertical button layouts
🌟 Custom Shadows: Provides none, sm, md, lg, xl five shadow styles
📏 Equal Height: Supports maintaining uniform height in grid layouts
📝 Text Control: Can control the maximum display lines of description text
🔗 Multi-link Support: Supports product website, App Store, GitHub and other links
🎭 Hover Effects: Provides smooth hover animations and shadow changes

Basic Usage

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

访问官网

<ProductCard
  name="示例产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="这是一款功能强大的示例产品，为用户提供优质体验。"
  productUrl="https://example.com/product"
/>

Size Options

ProductCard supports five preset sizes to adapt to different display needs:

超小尺寸产品

小巧精致的产品卡片，节省空间。

访问官网

小尺寸产品

紧凑型产品卡片，适合在列表中展示。

访问官网

中等尺寸产品

标准产品卡片，平衡信息展示和空间占用。

访问官网

大尺寸产品

大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。

访问官网

超大尺寸产品

超大尺寸产品卡片，提供最佳视觉体验和完整信息展示，适合特色产品或首页展示。

访问官网 App Store

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap">
  <ProductCard
    size="xs"
    name="超小尺寸产品"
    image={getExampleImage({ width: 150, height: 100 })}
    description="小巧精致的产品卡片，节省空间。"
    productUrl="https://example.com/xs"
  />
  <ProductCard
    size="sm"
    name="小尺寸产品"
    image={getExampleImage({ width: 150, height: 100 })}
    description="紧凑型产品卡片，适合在列表中展示。"
    productUrl="https://example.com/sm"
  />
  <ProductCard
    size="md"
    name="中等尺寸产品"
    image={getExampleImage({ width: 300, height: 200 })}
    description="标准产品卡片，平衡信息展示和空间占用。"
    productUrl="https://example.com/md"
  />
  <ProductCard
    size="lg"
    name="大尺寸产品"
    image={getExampleImage({ width: 380, height: 253 })}
    description="大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。"
    productUrl="https://example.com/lg"
  />
  <ProductCard
    size="xl"
    name="超大尺寸产品"
    image={getExampleImage({ width: 480, height: 320 })}
    description="超大尺寸产品卡片，提供最佳视觉体验和完整信息展示，适合特色产品或首页展示。"
    productUrl="https://example.com/xl"
    appStoreUrl="https://apps.apple.com/app/example-xl"
  />
</div>

Shadow Styles

Customize the card’s shadow effect through the shadow property:

大阴影产品

使用大阴影突出显示的产品。

访问官网

无阴影产品

无阴影的简洁风格。

访问官网

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<ProductCard
  name="大阴影产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="使用大阴影突出显示的产品。"
  productUrl="https://example.com/product"
  shadow="lg"
/>

<ProductCard
  name="无阴影产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="无阴影的简洁风格。"
  productUrl="https://example.com/product"
  shadow="none"
/>

Equal Height Cards

Use the equalHeight property in grid layouts to ensure all cards have consistent height:

产品一

这是一段很短的产品描述。

访问官网

产品二

这是一段较长的产品描述，包含更多详细信息，可能会导致卡片高度增加。使用equalHeight属性可以确保所有卡片高度一致。

访问官网 App Store

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<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 Control

Use the descriptionLines property to control the maximum display lines of description text:

默认行数限制

默认情况下，描述文本会根据卡片尺寸自动限制行数。例如中等尺寸(md)卡片默认显示3行文本。这段文本很长，但只会显示前几行，其余部分会被截断。

访问官网

自定义行数限制

通过设置descriptionLines=2，可以将描述文本限制为最多显示2行。这段文本很长，但只会显示2行，其余部分会被截断。

访问官网

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<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>

API Reference

Props

Property	Type	Default	Description
`name`	`string`	-	Product name (required)
`image`	`ImageSource`	-	Product image (required)
`description`	`string`	-	Product description (required)
`appStoreUrl`	`string`	-	App Store link
`productUrl`	`string`	-	Product website link
`githubUrl`	`string`	-	GitHub repository link
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Card size
`primaryButtonText`	`string`	`'Visit Website'`	Primary button text
`secondaryButtonText`	`string`	`'App Store'`	Secondary button text
`githubButtonText`	`string`	`'GitHub'`	GitHub button text
`buttonLayout`	`'row' \| 'column'`	`'row'`	Button layout direction
`equalHeight`	`boolean`	`false`	Whether to enable equal height cards
`descriptionLines`	`number`	-	Maximum lines for description text
`shadow`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Card shadow style
`class`	`string`	-	Custom class name

Size Specifications

Size	Width	Height	Use Case
`xs`	200px	280px	Dense layout, list display
`sm`	250px	360px	Small size display
`md`	320px	450px	Standard display (default)
`lg`	400px	550px	Highlight display
`xl`	500px	650px	Featured product display

Shadow Styles

Style	Description
`none`	No shadow, clean style
`sm`	Small shadow, slight depth
`md`	Medium shadow (default)
`lg`	Large shadow, prominent display
`xl`	Extra large shadow, strong depth

Usage Examples

Basic Product Card

<ProductCard
  name="Product Name"
  image="/images/products/product1.jpg"
  description="Product short description text"
  productUrl="https://product-website.com"
/>

With App Store Link

<ProductCard
  name="Product Name"
  image="/images/products/product1.jpg"
  description="Product short description text"
  appStoreUrl="https://apps.apple.com/app/product"
  productUrl="https://product-website.com"
/>

Custom Size and Shadow

<ProductCard
  size="lg"
  shadow="xl"
  name="Featured Product"
  image="/images/products/product1.jpg"
  description="Product highlighted with large size and shadow"
  productUrl="https://product-website.com"
/>

Equal Height Cards in Grid Layout

<div class="cosy:gap-4 cosy:grid cosy:grid-cols-3">
  <ProductCard
    equalHeight
    name="Product 1"
    image="/images/products/product1.jpg"
    description="Product description text"
  />
  <ProductCard
    equalHeight
    name="Product 2"
    image="/images/products/product2.jpg"
    description="Another product description"
  />
</div>

Vertical Button Layout

<ProductCard
  buttonLayout="column"
  name="Product Name"
  image="/images/products/product1.jpg"
  description="Product description"
  appStoreUrl="https://apps.apple.com/app/product"
  productUrl="https://product-website.com"
  githubUrl="https://github.com/product"
/>

Control Description Lines

<ProductCard
  descriptionLines={2}
  name="Product Name"
  image="/images/products/product1.jpg"
  description="This is a very long product description that might exceed two lines but will be truncated"
  productUrl="https://product-website.com"
/>