Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🃏

Card

Element

Checklist

0 out of 5

Style

Consider default background, border, shadow

Consistency

Ensure you have one base style for all cards

Spacing

A framework to sort your padding levels by

⭐️ Choose an easily divisible number as your padding difference, like divided by 4 or 5

Responsiveness

Consider the structure of the content in all various screen sizes

⭐️ Adopt a 'top-down' approach on mobile to not overfill the rows

Content hierarchy

The primary action/s you want users to perform

⭐️ Display links at the end of the card so the user is informed by the content in the card before making a decision

Articles
How card styles can improve user experience
Inkbot Design
Best practices for designing cards
UX Planet
Designing card-based user interfaces
Smashing Magazine
Examples
Ant Design
Material
Related
pages
View all
Orange arrow indicating card for pages content is a link

👋

Sign up

☎️

Contact us

🗞️

Blog post

🏢

Careers

🤝

Team

Other
elements
View all
Green arrow indicating card for element content is a link

🖲️

Button

🃏

Card

🌠

Icon

⌨️

Text field

⏳

Loading

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).