FeatureCard
Introduction
The FeatureCard component is a feature card component for displaying individual feature information. It adopts a clean design style, supports custom backgrounds, images, and text colors, perfect for feature showcases, functionality descriptions, and similar scenarios.
Component features:
- Clean Design - Adopts minimalist design style to highlight content
- Custom Background - Supports gradient backgrounds and solid colors
- Image Support - Optional feature image display
- Text Color - Supports white and dark text colors
- Hover Effects - Provides scaling and shadow hover animations
Examples
性能和电池续航
跑得快,跑得久。
Props
background
Background style, supports CSS string format, such as gradients or solid colors.
创新设计
每一处细节, 都经过精心设计。
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
Custom CSS class name for overriding default styles.
性能和电池续航
跑得快,跑得久。
性能和电池续航
跑得快,跑得久。
---
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
Feature description text, required property.
性能和电池续航
跑得快,跑得久。
创新设计
每一处细节, 都经过精心设计。从硬件到软件，从外观到交互，我们追求完美的用户体验。
---
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
Optional feature image, supports ImageSource type.
创新设计
每一处细节, 都经过精心设计。
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
Text color, optional values: “white” | “dark”, defaults to “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
Feature title, required property.
性能
跑得快,跑得久。
性能和电池续航优化
跑得快,跑得久。
---
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"
/>