Card
Components
A card is a contained, modular component that groups related information and actions. It displays content like text, images, and interactive elements within a distinct container, often with shadows or borders to create visual hierarchy and organization in layouts.
Checklist
Reset
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
