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