logo
English

导航菜单

Documents

astro
product
showcase
item
apple-style
display

ProductHero

Introduction

The ProductHero component is designed to display detailed information about a single product using an Apple-style large image display design. It supports alternating left-right layouts, label arrays, price display, and action buttons. Perfect for product detail pages, product showcase pages, and similar scenarios.

Component Features:

  • Large Image Display - Highlights product images with high-quality large image presentation
  • Alternating Layout - Supports left-right alternating layout for enhanced visual hierarchy
  • Information Hierarchy - Clear information structure: labels, titles, descriptions, prices, buttons
  • Apple Style - Adopts Apple’s clean and elegant design philosophy
  • Responsive Design - Excellent display across different devices

Examples

新品

极简手机

纯净体验，回归本质

¥6,999

极简手机

Props

align

Layout alignment, supports left (left-aligned, default) and right (right-aligned).

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  align="left"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  align="right"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

background

Background color type, uses predefined background color types such as ‘primary’, ‘base-200’, ‘gradient-sky’, etc., defaults to ‘base-100’.

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="base-100"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="base-200"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="primary/10"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

class

Custom CSS class for overriding default styles.

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";

// 示例产品数据
const product = {
	name: "极简手机",
	description: "纯净体验，回归本质",
	image: getProductImage({
		width: 800,
		height: 600,
		tag: "minimal-phone",
		provider: "picsum",
	}),
	price: "¥6,999",
	isNew: true,
};
---

<div style="border: 2px solid #3b82f6; border-radius: 0.5rem; padding: 1rem;">
  <ProductHero
    name={product.name}
    description={product.description}
    image={product.image}
    price={product.price}
    isNew={product.isNew}
    buyNowText="立即购买"
    learnMoreText="了解更多"
    newLabelText="新品"
  />
</div>

description

Product description, required property.

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质。采用最新技术，提供无与伦比的用户体验，让科技回归本质。

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质。采用最新技术，提供无与伦比的用户体验，让科技回归本质。"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

image

Product image, required property. Supports ImageSource type.

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'smart-watch',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

labels

Array of label strings. Pass one or multiple strings as tags.

新品
热卖

极简手机

纯净体验，回归本质

¥6,999

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'labels-demo',
    provider: 'picsum',
  })}
  highlight="¥6,999"
  labels={['新品', '热卖']}
/>

name

Product name, required property.

极简手机

纯净体验，回归本质

极简手机

极简手机 Pro Max

纯净体验，回归本质

极简手机 Pro Max
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机 Pro Max"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

highlight

Highlighted text (e.g., price or slogan). Optional; the row is hidden when omitted.

新品

极简手机

纯净体验，回归本质

¥6,999

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'highlight-demo',
    provider: 'picsum',
  })}
  highlight="¥6,999"
  labels={['新品']}
/>

Slots

actions

Custom action area (e.g., button group) rendered below the description and image.

热卖

极简手机

纯净体验，回归本质

¥5,999

极简手机
---



import { Button, getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'actions-demo',
    provider: 'picsum',
  })}
  labels={['热卖']}
  highlight="¥5,999">
  <div slot="actions" style="display:flex; gap: 1rem;">
    <Button variant="primary">立即购买</Button>
    <Button variant="outline">了解更多</Button>
  </div>
</ProductHero>

搜索