FeatureCard

@hua-labs/ui

v1.1.0

아이콘, 제목, 설명을 포함한 기능 소개 카드입니다. 그라디언트, 글래스, 네온 스타일을 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { FeatureCard } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본

프리미엄

고급 기능 제공

빠른 성능

최적화된 속도

보안

안전한 데이터

그라디언트

시작하기

지금 바로 시작

특별 기능

독점 기능

네온

사이버

미래적 디자인

Props

이름	타입	기본값	설명
`title*`	`string`	-	Card title
`description*`	`string`	-	Card description
`icon`	`IconName \| 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)
`customGradient`	`string`	-	Custom gradient class (for custom gradient)
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Card size

코드 예시

기본 사용법tsx

1import { FeatureCard } from '@hua-labs/ui/data';
2 
3<FeatureCard
4  icon="star"
5  title="Premium Features"
6  description="Unlock powerful features"
7/>

스타일 변형tsx

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/>

접근성

•이미지 대체 텍스트: 아이콘 이미지에 title이 대체 텍스트로 사용

HeroSection InfoCard