UI/UX Design Cards Lists and Tables
Cards, lists, and tables organize content into scannable pieces. Almost every app uses at least one of them: a shopping grid, a message inbox, a price comparison. Each pattern suits a different kind of information, and choosing the right one decides whether users find things quickly or give up.
Cards
A card is a small container that groups related content about one item. It usually holds an image, a title, a short description, and an action. Cards work well when items differ in content and users browse visually.
+----------------------+ +----------------------+ | [ Photo ] | | [ Photo ] | | Beach Resort | | Mountain Lodge | | 4.6 stars Rs. 5,200 | | 4.8 stars Rs. 6,800 | | [ View details ] | | [ View details ] | +----------------------+ +----------------------+
Card Design Rules
- Make the entire card tappable, not only the title
- Keep the same structure across all cards in a grid
- Limit each card to one primary action
- Use consistent image ratios so rows align
Lists
A list stacks items in a single column. Lists excel when users scan for a name, a date, or a status. Email inboxes, settings menus, and contact books all rely on lists.
+--------------------------------------------+ | (o) Priya Nair 10:42 AM | | Project update attached... | +--------------------------------------------+ | (o) Rahul Verma Yesterday | | Can we reschedule the call? | +--------------------------------------------+
List Design Rules
- Align text to the left edge for fast scanning
- Place the most important detail first in each row
- Use dividers or spacing to separate rows, not both
- Keep row height comfortable for touch, at least 44 pixels
Tables
A table arranges data in rows and columns so users can compare values. Tables suit numbers, schedules, and records with many attributes. A reader looks across a row to understand one item and down a column to compare many items.
| Plan | Storage | Users | Price/month | |----------|---------|-------|-------------| | Basic | 10 GB | 1 | Rs. 0 | | Standard | 100 GB | 5 | Rs. 199 | | Premium | 1 TB | 20 | Rs. 499 |
Table Design Rules
- Left-align text and right-align numbers so digits line up
- Keep column headers visible while scrolling
- Offer sorting on columns that users compare
- Limit columns to what the task needs
Choosing the Right Pattern
CONTENT TYPE BEST PATTERN Visual items (products, places) Cards Simple items, quick scanning List Many attributes to compare Table Mixed media with actions Cards in a grid Settings and navigation List
Responsive Behavior
A grid of four cards on a desktop collapses into one column on a phone. A wide table cannot shrink without losing meaning. Convert each row into a stacked card on small screens, with labels beside values. Another option is horizontal scrolling with a frozen first column. Test long names and large numbers in the design phase.
DESKTOP TABLE ROW MOBILE CARD
Name | Role | City | Status Name: Anita Rao
Anita| Dev | Pune | Active Role: Developer
City: Pune
Status: Active
Handling Many Items
Long collections need a plan. Pagination splits content into numbered pages and suits tables where users need exact positions. Infinite scroll loads more items as the user moves down and suits casual browsing. A "Load more" button gives users control and keeps the footer reachable.
Common Mistakes
- Packing too much text into a card until it turns into a mini page
- Using a table for content that has only two attributes
- Changing card height across a row, which creates a ragged grid
- Hiding critical actions behind tiny icons
Key Points
- Cards suit visual, varied items; lists suit quick scanning; tables suit comparison
- Consistent structure helps users recognize patterns
- Align numbers right and text left in tables
- Rework tables into stacked layouts on small screens
- Pick pagination, infinite scroll, or load-more based on user goals