Accordion
콘텐츠 전체를 한 번에 보여줄 필요가 없을 때 Accordion을 사용하여 페이지의 가독성을 높이고 스크롤 양을 줄일 수 있습니다. 기본 상태는 닫힌 상태로 설정하며, 사용자가 직접 확장할 수 있습니다.
Accordion
콘텐츠 전체를 한 번에 보여줄 필요가 없을 때 Accordion을 사용하여 페이지의 가독성을 높이고 스크롤 양을 줄일 수 있습니다. 기본 상태는 닫힌 상태로 설정하며, 사용자가 직접 확장할 수 있습니다.
Accordion
콘텐츠 전체를 한 번에 보여줄 필요가 없을 때 Accordion을 사용하여 페이지의 가독성을 높이고 스크롤 양을 줄일 수 있습니다. 기본 상태는 닫힌 상태로 설정하며, 사용자가 직접 확장할 수 있습니다.
Anatomy
ESSENTIAL
1. 타이틀
open 상태의 경우 title에 txt-purple-primary 컬러를 사용합니다.
2. 아이콘
확장/축소의 의미를 부여할 수 있는 아이콘만 사용합니다.
3. 내용
글자수 제한은 없지만 최대한 명확하고 간결하게 내용을 전달해야 합니다.
Anatomy
ESSENTIAL
1. 타이틀
open 상태의 경우 title에 txt-purple-primary 컬러를 사용합니다.
2. 아이콘
확장/축소의 의미를 부여할 수 있는 아이콘만 사용합니다.
3. 내용
글자수 제한은 없지만 최대한 명확하고 간결하게 내용을 전달해야 합니다.
Anatomy
ESSENTIAL
1. 타이틀
open 상태의 경우 title에 txt-purple-primary 컬러를 사용합니다.
2. 아이콘
확장/축소의 의미를 부여할 수 있는 아이콘만 사용합니다.
3. 내용
글자수 제한은 없지만 최대한 명확하고 간결하게 내용을 전달해야 합니다.
State
Control
focused
false
true
Control
focused
false
true
Control
focused
false
true
Properties
size | L, M | |||||
focused | false, true | |||||
Properties
size | L, M | |||||
focused | false, true | |||||
Properties
size | L, M | |||||
focused | false, true | |||||
Spec
 | Width• Container에 맞춰 Fill로 사용 |
 | Row-Gap텍스트 영역의 max-width 는 700px으로 제한 |
Spec
Width
• Container에 맞춰 Fill로 사용
• 아코디언 사이 간격에는 16px을 사용
Row-Gap
텍스트 영역의 max-width 는 700px으로 제한
Spec
| Width• Container에 맞춰 Fill로 사용 |
| Row-Gap텍스트 영역의 max-width 는 700px으로 제한 |
Usage
Do
FAQ 섹션에는 멀티 확장 방식을 권장합니다.
Don't
확장/축소의 의미를 벗어나는 아이콘은 사용할 수 없습니다.
Usage
Do
FAQ 섹션에는 멀티 확장 방식을 권장합니다.
Don't
확장/축소의 의미를 벗어나는 아이콘은 사용할 수 없습니다.
Usage
Do
FAQ 섹션에는 멀티 확장 방식을 권장합니다.
Don't
확장/축소의 의미를 벗어나는 아이콘은 사용할 수 없습니다.