Keep one theme per card
Determine what users need to know before deciding to open a card.
Card Design system
Collect information and actions into one easy-to-scan unit.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Keep one theme per card
The course card states the name, level and duration before the “View course” button.
Variants and use cases
How to separate cards
Use a border or background to differentiate the card from the page, keeping the same rules for the same content type.
Test cards on light and dark backgrounds; The boundary needs to be visible regardless of the shadow.
Example Document tags use clear borders and a linked title.
Spacing in tags
Group photos, titles, descriptions, and actions by spacing that reflects content relationships.
Try two-line titles and missing photos; Distance does not create meaningless space.
Example Image 12px away from title; The description is closer to the title than the tag end button.
Round corners and crop content
Use corner radii from the same design scale and crop images to match the frame's corners.
Place the image at the card's edge and focus the card. The image must respect the rounded corners and the focus outline must remain fully visible.
Example Round only the image's two upper corners; keep the footer background continuous with the card.