Accordion
Accordion
Accordion
Accordion은 여러 개의 항목 중 하나 또는 일부를 펼쳐 내용을 확인할 수 있는 컴포넌트입니다. 공간을 효율적으로 사용하면서 정보의 계층 구조를 드러낼 때 활용됩니다. 기본적으로 닫힌 상태로 제공되며, 사용자가 직접 확장할 수 있습니다.
Accordion
Accordion은 여러 개의 항목 중 하나 또는 일부를 펼쳐 내용을 확인할 수 있는 컴포넌트입니다. 공간을 효율적으로 사용하면서 정보의 계층 구조를 드러낼 때 활용됩니다. 기본적으로 닫힌 상태로 제공되며, 사용자가 직접 확장할 수 있습니다.
Anatomy
ESSENTIAL
1. 레이블
질문 또는 콘텐츠를 요약한 문장으로 이루어진 텍스트입니다. 펼친 상태일 경우 타이틀에 txt-purple-primary 컬러를 사용합니다.
2. 토글 아이콘
확장/축소의 의미를 부여할 수 있는 아이콘만 사용합니다. 상태 변화를 시각적으로 명확하게 표현해야 합니다.
3. 패널
펼쳤을 때 노출되는 상세 콘텐츠 영역입니다. 글자 수 제한은 없으나, 가능한 한 명확하고 간결하게 작성합니다.
Anatomy
ESSENTIAL
1. 레이블
질문 또는 콘텐츠를 요약한 문장으로 이루어진 텍스트입니다. 펼친 상태일 경우 타이틀에 txt-purple-primary 컬러를 사용합니다.
2. 토글 아이콘
확장/축소의 의미를 부여할 수 있는 아이콘만 사용합니다. 상태 변화를 시각적으로 명확하게 표현해야 합니다.
3. 패널
펼쳤을 때 노출되는 상세 콘텐츠 영역입니다. 글자 수 제한은 없으나, 가능한 한 명확하고 간결하게 작성합니다.
State
State
State
Properties
Focused | false, true |
Size | L, S |
Properties
Focused | false, true |
Size | L, S |
Spec
 | Row Gap아코디언 사이 간격은 16px입니다. |
 | Width컨테이너 넓이에 맞춰 Fill로 설정합니다. |
Spec
Row Gap
아코디언 사이 간격은 16px입니다.
Width
컨테이너 넓이에 맞춰 Fill로 설정합니다. 텍스트 영역의 max-width는 700px로 제한합니다.
Usage
Do
FAQ 섹션에는 멀티 확장 방식을 권장합니다.
Don't
확장/축소의 의미를 벗어나는 아이콘은 사용할 수 없습니다.
Usage
Do
FAQ 섹션에는 멀티 확장 방식을 권장합니다.
Don't
확장/축소의 의미를 벗어나는 아이콘은 사용할 수 없습니다.