Skip to Content
FoundationsIcignalShadows (그림자)

Shadows (그림자)

iCignal의 그림자 시스템은 Foundation과 완전히 동일합니다.

Foundation 상속

iCignal은 Foundation의 그림자 토큰을 모두 상속합니다.

Shadow Scale

토큰Elevation사용 사례
sm1pxInput, Checkbox, Tag
md4-6pxCard, Dropdown (기본)
lg10-15pxModal, Popover
xl20-25pxModal 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