Info Box
Anatomy
Variants
Usage
Info Box는 정보의 유형에 따라 3가지로 분류합니다. Warning, Highlight, Basic 순으로 정보의 중요도가 높습니다. Basic은 간결한 정보, Highlight는 Basic보다 중요도가 높은 정보, Warning은 부정적인 액션에 대한 경고성 정보를 전달합니다.
Contents
Info Box는 정보의 구성에 따라 콘텐츠를 Basic, Button, Title 3가지로 분류합니다. Info Text와 Info Icon으로 구성된 Basic Info Box를 기본으로 합니다. 버튼은 정보에 대한 액션이 필요한 경우 사용합니다. 타이틀은 Info Box 정보를 함축·요약이 필요한 경우 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Usage | Basic, Highlight, Warning | Basic |
| Contents | Basic, Button, Title | Basic |
Usage Guidelines
Do : Basic Info Box의 Border Color gray-300 적용
Card 템플릿이 연속 사용되는 케이스 중 Basic Info Box가 단독으로 사용되는 경우, Border Color gray-300을 적용합니다.
Do : Basic Info Box의 Border Color gray-200 적용
해당 케이스 외에 Basic Info Box의 Border Color는 gray-200 사용을 기본으로 합니다.
Do : 특정 정보 강조 시 Bold 적용
Highlight Info Box 사용 시, 정보의 강조와 구분이 필요할 경우 Text-xs/Noto Sans KR/Bold를 적용합니다.
Don’t : 이 외 케이스 제한
Highlight Info Box의 정보에 한정합니다. Basic, Warning Info Box에서는 강조와 구분을 위해 Info Text 스타일을 변경할 수 없습니다.
Do : Popover 기능 시, Solid 아이콘 우측 정렬
Popover 기능이 적용될 시 Info Text와 Icon 간 간격 값 4를 적용합니다. 이 외 Info Icon은 Popover 가이드에 따른 Solid형, 우측 정렬이 적용됩니다.
Don’t : Popover 기능 시, Info Box 가이드 적용
Popover 기능이 적용될 시, Info Icon에 Info Box 가이드가 적용되지 않습니다.
Do : Highlight Info Box와 Highlight Text 간의 호환 가능
Highlight Info Box와 Highlight Text는 알림이 필요한 주목성 있는 정보를 다룬다는 점에서 유사한 기능을 합니다. 이에 따라 서로 호환되어 사용할 수 있습니다.
Spec
Basic
Info Text는 해상도 360 기준, 최대 63자(145byte, 공백 포함) 사용을 기본으로 합니다.
Button
Info Box Button의 Info Icon은 Info Text와 Button을 기준으로 좌측, 중앙 정렬합니다. 모든 버튼 색상은 Gray-600을 적용합니다.
Title
타이틀은 최대 20자까지 입력 가능합니다. 해상도 360 기준 Info Text는 타이틀을 제외한 최대 69자 사용을 기본으로 합니다. (147byte, 공백 포함) Divider로 타이틀과 Info Text를 구분합니다.
