Spacing (간격)
iCignal의 간격 시스템은 Foundation과 완전히 동일합니다.
Foundation 상속
iCignal은 Foundation의 간격 토큰을 모두 상속합니다:
@import "@vortex/ui-foundation/theme";Spacing Scale
Foundation과 동일한 7단계 간격을 사용합니다.
| 토큰 | 크기 | 사용 사례 |
|---|---|---|
| xs | 4px | 아이콘과 텍스트 사이, 작은 Gap |
| sm | 8px | Input Padding, Button 내부 간격 |
| md | 16px | Card Padding, Section 간격 (기본) |
| lg | 24px | Section 간격, Container Padding |
| xl | 32px | 큰 Section 간격 |
| 2xl | 48px | Hero Section, Feature Section 간격 |
| 3xl | 64px | Page Section 간격 |
실전 예제
import { Button } from "@vortex/ui-icignal";
export default function Example() {
return (
<div className="p-md bg-white border rounded-lg">
<h3 className="text-xl font-semibold text-text-primary">Card Title</h3>
<p className="mt-sm text-text-secondary">Card description</p>
<div className="mt-lg flex gap-md">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
</div>
</div>
);
}다음 단계
Last updated on