Skip to Content
FoundationsIcignalBorders (테두리)

Borders (테두리)

iCignal의 테두리 시스템은 Foundation과 완전히 동일합니다.

Foundation 상속

iCignal은 Foundation의 Border Radius와 Border Width 토큰을 모두 상속합니다.

Border Radius

토큰크기사용 사례Tailwind Class
sm4pxInput, Tag, Badgerounded-sm
md8pxButton, Card (기본)rounded-md
lg12pxModal, Dialogrounded-lg
xl16pxHero Image, Feature Cardrounded-xl

실전 예제

import { Button } from "@vortex/ui-icignal"; export default function Example() { return ( <div className="p-md bg-white border border-border-default rounded-lg shadow-md"> <h3 className="text-xl font-semibold text-text-primary mb-sm"> iCignal Card </h3> <p className="text-text-secondary mb-md">Card with iCignal branding</p> <div className="flex gap-md"> <Button variant="primary">Primary (Blue)</Button> <Button variant="secondary">Secondary (Green)</Button> </div> </div> ); }

다음 단계

Last updated on