List card
여러 콘텐츠를 목록 형태로 보여줄 때 사용하는 요소입니다. 이미지, 텍스트, 뱃지 등 다양한 요소를 조합하여 각 항목의 정보를 시각적으로 일관성 있게 전달합니다.
- 1. Container
- 2. Thumbnail
- 3. Leading content
- 4. Heading
- 5. Caption
- 6. Extra caption
- 7. Top content
- 8. Trailing content
- 9. Bottom content
Card가 표시될 디바이스 환경에 맞춰 데스크톱과 모바일로 구분하여 사용합니다. 썸네일은 3:2 비율을 기본으로 하며, 필요한 경우 자유롭게 비율을 변경하여 사용할 수 있습니다.
접근성을 보장하기 위해 화면에 보이는 콘텐츠의 시각적 순서와 코드(DOM)의 구조적 순서를 일치시켜야 합니다. 스크린 리더가 눈으로 읽는 것과 동일하게 페이지를 읽도록 하여 사용자가 맥락을 올바르게 이해하도록 돕습니다. 또한, 키보드 사용자가 Tab 키로 탐색할 때 초점이 예측 가능한 순서로 이동하도록 합니다.
반응형 화면, 특히 모바일에서 여러 카드를 가로로 나열할 때, 화면 가장자리에 다음 카드의 일부가 보이도록 배치하세요. 사용자에게 숨겨진 목록의 존재를 시각적 단서를 제공하여 알리고, 탐색을 유도할 수 있습니다.
Do
Grid, Carousel 형태로 배열하여 여러 항목을 효과적으로 탐색할 수 있습니다.
Don’t
Heading과 Caption을 임의로 변경하여 정보 위계를 불분명하게 사용하지 않습니다.