카드는 서로 연관된 정보나 액션을 그룹화하여 스타일을 적용한 컨테이너 입니다.
Usage
데이터가 혼재한 목록이나 특정 콘텐츠를 간결하게 표시하여 제공할 때 사용합니다.
•
주문, 기술협업 등 사용자 과업에 관련한 목록을 제공할 때 사용합니다.
•
단위 제품에 대한 소개 및 링크를 제공할 때 사용합니다.
•
기타 디자인적 판단에 따라 필요한 경우 사용합니다.
Variants
Data display
다양한 데이터와 사용자 컨트롤을 제공하는 경우에 사용하는 형태입니다.
1.
컨테이너 자체에 상세 페이지로 이동하는 링크를 적용합니다.
호버 상태의 마이크로 인터랙션을 사용할 수 있습니다.
2.
타이틀은 해당 페이지의 구조에 따라 heading을 적용하여 사용합니다.
예를 들어 h1 크기의 페이지 타이틀 밑으로 카드가 위치한다면 h2로 적용하여 사용합니다.
3.
아이콘 등 사용자의 이해를 돕기 위한 디자인 요소를 함께 사용할 수 있습니다.
4.
내용 영역에서는 배지, 상태 표시기, 버튼 등 다양한 요소를 필요에 따라 사용할 수 있습니다.
Content display
개별 제품을 소개하고 해당 페이지로 이동을 제공하는 경우에 사용합니다.
1.
컨테이너 자체에 링크 및 마이크로 인터랙션을 사용하지 않습니다.
2.
토글 스위치 방식으로 사용자의 북마크를 지원합니다.
3.
해당 제품 페이지로 이동을 하는 버튼을 배치합니다. 호버 상태의 마이크로 인터랙션을 사용합니다.
Guidelines
전체 UI와 일관성을 유하지기 위해 다음의 지침에 따라 사용합니다.
•
Space, padding, font 등 카드 구성을 위한 디자인 속성을 사전에 정의하여 사용합니다.
•
배지, 말 줄임, 표시기 등 함께 사용하는 구성요소의 동작 패턴을 새롭게 추가하여 사용할 수 없습니다.
•
한 페이지 내에서 CTA가 포함된 카드를 여러 개 표시하는 경우 시각적 복잡성이 가중될 수 있다는 점을 고려하여 디폴트 스타일을 정하고 마이크로 인터랙션을 통해 행위지원성을 부여합니다.
Accessibility
•
스크린 리더 사용자에게 페이지의 구조를 제공하고 가독성을 향상시킬 수 있도록 카드의 타이틀 레벨은 해당 페이지의 구조에 따라 적용합니다.
•
일관성의 유지를 위해 동일 형태의 카드는 동일한 구조의 페이지에서만 사용합니다.
