Skip to Content
FoundationsCalsShadows (그림자)

Shadows (그림자)

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

Foundation 상속

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

Shadow Scale

토큰Elevation사용 사례
sm1pxInput, Checkbox, Tag
md4-6pxCard, Dropdown (기본)
lg10-15pxModal, Popover
xl20-25pxModal Backdrop, Toast

실전 예제 - Booking Card

import { Button, Badge } from "@vortex/ui-cals"; export default function BookingCard() { return ( <div className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"> <img src="/venue.jpg" alt="Venue" className="w-full h-48 object-cover rounded-t-lg" /> <div className="p-md"> <Badge variant="booking-available" className="mb-sm"> 예약 가능 </Badge> <h3 className="text-xl font-semibold mb-sm">회의실 A</h3> <p className="text-gray-600 mb-md">4인용 회의실</p> <Button variant="primary">예약하기</Button> </div> </div> ); }

다음 단계

Last updated on