logo
简体中文

导航菜单

文档

astro
feature
card
display

FeatureCard

简介

FeatureCard 组件是一个特性卡片组件，用于展示单个特性信息。它采用简洁的设计风格，支持自定义背景、图片和文字颜色，适用于特性展示、功能说明等场景。

组件特性：

  • 简洁设计 - 采用极简的设计风格，突出内容
  • 自定义背景 - 支持渐变背景和纯色背景
  • 图片支持 - 可选的特性图片展示
  • 文字颜色 - 支持白色和深色文字
  • 悬停效果 - 提供缩放和阴影的悬停动画

案例

性能和电池续航

跑得快,跑得久。

性能和电池续航

Props

background

背景样式，支持CSS字符串格式，如渐变色或纯色。

创新设计

每一处细节, 都经过精心设计。

Mac 和 iPhone

梦幻好队友。

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="创新设计"
  description="每一处细节, 都经过精心设计。"
  background="linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="Mac 和 iPhone"
  description="梦幻好队友。"
  background="#a7f3d0"
  textColor="dark"
/>

class

自定义CSS类名，用于覆盖默认样式。

性能和电池续航

跑得快,跑得久。

性能和电池续航

跑得快,跑得久。

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="性能和电池续航"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  class="cosy:border-2 cosy:border-primary cosy:rounded-xl"
  title="性能和电池续航"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

description

特性描述文本，必填属性。

性能和电池续航

跑得快,跑得久。

创新设计

每一处细节, 都经过精心设计。从硬件到软件，从外观到交互，我们追求完美的用户体验。

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="性能和电池续航"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="创新设计"
  description="每一处细节, 都经过精心设计。从硬件到软件，从外观到交互，我们追求完美的用户体验。"
  background="linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"
  textColor="white"
/>

image

可选的特性图片，支持 ImageSource 类型。

创新设计

每一处细节, 都经过精心设计。

创新设计

Mac 和 iPhone

梦幻好队友。

---



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

<FeatureCard
  title="创新设计"
  description="每一处细节, 都经过精心设计。"
  background="linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"
  image={getProductImage({
    width: 400,
    height: 300,
    tag: 'design-aesthetics',
    provider: 'picsum',
  })}
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="Mac 和 iPhone"
  description="梦幻好队友。"
  background="#a7f3d0"
  textColor="dark"
/>

textColor

文字颜色，可选值：“white” | “dark”，默认为 “dark”。

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="性能和电池续航"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="Mac 和 iPhone"
  description="梦幻好队友。"
  background="#a7f3d0"
  textColor="dark"
/>

title

特性标题，必填属性。

性能

跑得快,跑得久。

性能和电池续航优化

跑得快,跑得久。

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="性能"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

---



import { FeatureCard } from "@coffic/cosy-ui";
---

<FeatureCard
  title="性能和电池续航优化"
  description="跑得快,跑得久。"
  background="linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
  textColor="white"
/>

搜索