Document cards
Document cards represent files attached to policies, claims, accounts, or contacts. They communicate file type at a glance, support quick download and preview actions, and accommodate version history when a document has been revised.
Document card component
Each card shows a file-type icon (color-coded by format), the document name (truncated at one line), metadata (size, upload date, uploader), and action buttons.
| File type | Class modifier | Background | Text color |
|---|---|---|---|
.ws-doc-icon--pdf | #fff0f0 | #dc2626 (Red) | |
| Excel / CSV | .ws-doc-icon--xlsx | green-50 | green-700 |
| Word / Text | .ws-doc-icon--docx | #eff6ff | #1d4ed8 (Blue) |
| Other | .ws-doc-icon--gen | gray-100 | gray-600 |
Upload document card
The upload card is a drop zone that appears within a document list, allowing users to add new files inline without navigating away. Accepts drag-and-drop or click to browse.
Version history
When a document has been revised, the card expands to show a version history list. Each version shows the version number, upload date, uploader, and a download link. The latest version is marked.
Document page templates
Document lists appear in two layouts — a card grid for visual file browsing, and a compact table view for high-density lists. Users can toggle between views. Filtering by type, date, and uploader is surfaced in a filter bar above the list.
Usage guidance
- Always show file type, name, size, and upload date on every card.
- Truncate long file names at one line with text-overflow: ellipsis.
- Provide a version history view for documents that can be revised.
- Use the upload drop zone inline within document lists.
- Don't rename files on upload without confirming with the user.
- Don't show a download progress indicator inside the card — use a toast.
- Don't hide the file extension — it helps users identify documents quickly.
- Don't mix grid and table document cards in the same list view.