Accordions은 용도에 따라 A.Basic형과 B. Large, C.Contents형으로 구분됩니다.

Basic형은 필터/카테고리 등 단순한 탐색 정보를 효과적으로 그룹핑 하여 정리할 수 있습니다.

Accordion에 그룹핑된 필터 값 선택 시 Alert text로 선택된 정보를 표기할 수 있습니다. 기본 설정값은 Default를 사용합니다.

Basic Accordion의 Status는 Open, Closed로 분류되며 기본 설정값은 Closed 입니다. 필요시 Open으로 설정 가능합니다.

Do : Title은 명사형으로 간단 명료하게 사용

Title은 최대 한줄까지 표기 가능하며 명사형으로 간단 명료해야 합니다. 컬러는 Gray-900을 사용합니다.

Do : Alert text는 Title을 제외한 영역까지 표기 가능

Alert text는 Title을 제외한 영역의 최대 한줄까지 표기합니다. 컬러는 Green-500을 사용합니다.

Don’t : Alert text는 Nudging 요소로 사용 불가능

Alert Text는 사용자가 선택한 옵션값만 표기 가능합니다. 옵션값 표기 이외에 넛징 요소로는 사용할 수 없습니다.

Size

Basic Accordion은 단일 사이즈로 높이 48 고정입니다. Alert Text는 Title을 제외한 영역의 최대 한줄까지 표기하며 영역을 넘어갈 시 말줄임 처리합니다.

Divider

Basic Accordion을 그룹으로 사용 시 Gray-200, 높이 1의 가로 Divider로 Accordion 사이를 구분합니다.

Large Accordion은 상품 또는 유저와 관련하여 필요한 대용량의 정보를 효과적으로 그룹핑하여 정리할 수 있습니다.

Large Accordion의 Status는 Open, Closed로 분류되며 기본 설정값은 Closed 입니다. 필요시 Open으로 설정 가능합니다.

Do : 제목은 명사형으로 간단 명료하게 사용 가능

제목은 최대 한줄까지 표기 가능하며 명사형으로 간단 명료해야 합니다. 컬러는 Gray-900을 사용합니다.

Don’t : 제목은 서술형으로 사용 불가

제목은 명사형으로 간단 명료하게 사용해야 합니다. 서술형으로 사용을 하지 않도록 주의해주세요.

Size

Large Accordion은 단일 사이즈로 높이 56 고정입니다. Title은 최대 한줄까지 표기 가능하며 영역을 넘어갈 시 말줄임 처리합니다.

Divider

Large Accordion을 그룹으로 사용 시 Gray-200, 높이 1의 가로 Divider로 Accordion 사이를 구분합니다.

Contents Accordion은 Accordion을 열어보지 않고도 필요한 정보를 요약하여 표기할 수 있습니다. Title과 Indicator는 필수 노출이며 Body text, Icon, Discription 정보를 옵션으로 표기할 수 있습니다.

Contents Accordion의 Status는 Open, Closed로 분류됩니다. Accordion의 열림/닫힘을 나타내며 Indicator Icon Color는 Gray-900을 사용합니다. 기본 설정값은 Closed 입니다.

Icon은 Accordion 내용을 보다 직관적으로 전달하기 위해 사용하는 이미지 요소입니다. 왼쪽 상단에 24 x 24 사이즈로 사용 가능합니다.

Do : 텍스트의 부분 컬러 사용 가능

문장에서 강조하고 싶은 부분에만 컬러를 사용하여 정보의 우선순위를 높일 수 있습니다.

Don’t : 한 문장에 강조 컬러 1개이상 사용 불가능

컬러 사용은 Foundation 기준으로 목적에 맞게 사용해야 하며 한 문장에 1개의 강조 컬러만 사용하여 정보의 우선순위를 명확하게 해야합니다.

Do : 컬러는 목적에 따라 변경 가능

Contents형의 Title과 Body text의 기본 컬러는 Gray-900을 사용하며 필요 시 Blue-500, Green-500 또는 Orange-400 사용 가능합니다. Discription은 보조 내용 명시가 필요할 시 사용합니다. 기본 컬러는 Gray-500이며 필요 시 Blue-500, Blue-500 또는 Orange-400 사용 가능합니다.

Do : 스마일배송 상품에 한정하여 배송비 Nudging balloon 사용 가능

스마일배송 상품에 한정하여 Contents Accordion 사용 시 배송비 Nudging balloon을 사용할 수 있습니다. Contents group > Delivery 레이어 내에서 2가지 종류의 Balloon중 한가지를 선택하여 눈을 켜서 사용 가능합니다.

Size

Contents Accordion은 상하 8(텍스트는 10), 텍스트 사이 10, 좌우 16 마진으로 컨텐츠에 따라 높이가 가변됩니다.

Divider

Contents Accordion을 그룹으로 사용 시 Gray-200, 높이 1의 좌우 마진 16의 Divider로 Accordion 사이를 구분합니다.

이전글

Typography

다음글

Badges