Shadows (그림자)
iCignal의 그림자 시스템은 Foundation과 완전히 동일합니다.
Foundation 상속
iCignal은 Foundation의 그림자 토큰을 모두 상속합니다.
Shadow Scale
| 토큰 | Elevation | 사용 사례 |
|---|---|---|
| sm | 1px | Input, Checkbox, Tag |
| md | 4-6px | Card, Dropdown (기본) |
| lg | 10-15px | Modal, Popover |
| xl | 20-25px | Modal Backdrop, Toast |
실전 예제
import { Button } from "@vortex/ui-icignal";
export default function ProductCard() {
return (
<div className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
<img
src="/product.jpg"
alt="Product"
className="w-full h-48 object-cover rounded-t-lg"
/>
<div className="p-md">
<h3 className="text-xl font-semibold text-text-primary mb-sm">
Product Name
</h3>
<p className="text-text-secondary mb-md">Product description</p>
<Button variant="primary">Add to Cart</Button>
</div>
</div>
);
}다음 단계
Last updated on