How do you organise cards, tables, and overlays?
Choose containers for browsing, comparison, or a focused action.
Cards, tables, and overlays organise information in different ways. Choose for how users need to read and act, rather than fitting all content into the same visual container.
Keep these basics in mind
- A card groups information about one item and supports browsing. See USWDS card guidance .
- A table aligns data by rows and columns for comparison. It needs clear column headings and narrow-window handling. See USWDS table guidance .
- An overlay appears above other content. A modal dialog requires addressing the current window before operating the background.
- Modal dialogs need a name, appropriate focus handling, and a way to leave. Closing usually returns focus to the opening control. See W3C’s modal-dialog pattern .
Choose a container
Illustrative container choices
These are teaching scenarios.
| Task | Previous arrangement | Adjustment |
|---|---|---|
| Browse services | Dense table of small text | Consider service cards |
| Compare member permissions | Large card for every member | Table with matching fields |
| Confirm member deletion | No clear object in the message | State the member and consequences |
Walk through an example
An administrator compares member permissions in a table with name, role, and status columns. Delete opens a confirmation dialog naming the member. Cancel returns focus to the original control. The team checks table reading and operation in a narrow window too.
Limits and common misunderstandings
Cards need not be clickable across their entire area; multiple internal actions must avoid conflicts. A tooltip , a short supplementary hint, is unsuitable for essential complex instructions. Modal dialogs interrupt the current process, so use them when necessary.