Card Usage

특정 주제에 대한 정보를 담고 있으며 사용자가 세부 페이지로 진입해 작업을 수행할 수 있도록 합니다.

Layout

Spacing

카드 간의 간격은 16px로 적용하여 배치합니다.

Sizing

한 줄에 배치된 카드의 높이는 동일하게 적용합니다.

✓DoRecommended

같은 줄에 배치된 카드는 가장 긴 높이를 기준으로 동일하게 맞춥니다.

✕Don'tRecommended

같은 줄에 배치된 카드에 각기 다른 높이를 적용하지 않습니다.

Content

Media

Image media의 경우 최대 4개가 배치되어 보일 수 있습니다.

보여줄 이미지가 없거나 이미지가 정상적으로 보여질 수 없는 경우에는 사용자가 알 수 있도록 적절한 상태를 노출합니다.

Card Details

상세 내용을 담을 수 있는 card details 슬롯에서는 최대 높이를 초과하는 내용물에 대해 scroll 처리 합니다.

✓DoRequired

정보를 통일된 구조로 구성하여 제공합니다.

✕Don'tRequired

정보를 다른 구조로 제공하지 않습니다.