Skip to content
Docs

FeatureCard

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { FeatureCard } from "@hua-labs/hua";

title*string-Card title
description*string-Card description
iconIconName | string-Icon name or image URL
variant"default" | "gradient" | "glass" | "neon""default"Visual style
hover"scale" | "glow" | "slide" | "none""scale"Hover effect
gradient"blue" | "purple" | "green" | "orange" | "pink" | "custom""blue"Gradient color (for gradient variant)
customGradientstring-Custom gradient class (for custom gradient)
size"sm" | "md" | "lg""md"Card size

docs:common.basicUsagetsx
1import { FeatureCard } from '@hua-labs/hua';
2 
3<FeatureCard
4  icon="star"
5  title="Premium Features"
6  description="Unlock powerful features"
7/>
docs:components.featureCard.examples.styleVariantstsx
1// Gradient
2<FeatureCard
3  variant="gradient"
4  gradient="purple"
5  title="Fast Performance"
6  description="Optimized for speed"
7/>
8 
9// Glass
10<FeatureCard
11  variant="glass"
12  title="Modern Design"
13  description="Beautiful UI"
14/>
15 
16// Neon
17<FeatureCard
18  variant="neon"
19  title="Cyber Style"
20  description="Futuristic look"
21/>

  • •docs:components.featureCard.accessibility.imageAlt: docs:components.featureCard.accessibility.imageAltDesc
HeroSectionInfoCard