卡片

Gradient Card

渐变色卡片组件，支持多种渐变样式和阴影效果

cardgradientdesign

快速预览

查看 Gradient Card 组件的基本效果

渐变卡片

这是一个带有渐变背景的美观卡片组件。

基本用法

使用 Gradient Card 组件的基础示例

导入组件

import { GradientCard } from "@/components/qiuye-ui/gradient-card";

使用组件

<GradientCard gradient="blue">
  <div className="p-6">
    <h3 className="text-lg font-semibold">卡片标题</h3>
    <p className="text-muted-foreground">这是卡片内容</p>
  </div>
</GradientCard>

组件演示

查看组件的各种使用方式和效果

渐变主题

不同颜色的渐变卡片

蓝色主题

清新的蓝色渐变，适合商务和科技类应用。

科技感

紫色主题

神秘的紫色渐变，适合创意和设计类应用。

创意

粉色主题

温暖的粉色渐变，适合时尚和生活类应用。

时尚

橙色主题

活力的橙色渐变，适合运动和娱乐类应用。

活力

绿色主题

自然的绿色渐变，适合健康和环保类应用。

自然

渐变强度

同一主题下不同强度的渐变效果

轻度渐变

subtle 和柔和的渐变效果，适合简约设计。

中度渐变

平衡的渐变效果，大多数场景的最佳选择。

强烈渐变

鲜明的渐变效果，适合需要突出显示的内容。

实际应用场景

在真实项目中的使用示例

🚀

产品发布

展示新产品特性和优势，吸引用户关注。

📊

数据统计

美观地展示关键数据和统计信息。