Specifications
All cards’ categories should be consistent in their actions. If you have a card representing a folder, this one should be easily distinguishable from cards representing files, but their actions should be consistent in the context where users
Following elements make up a card component:
- Card Container 96x80px or mm
- Title
- Hover plate
- Tooltip - works on-hover to reveal truncated title information
Touch = UIs placed at 50cm (~20 Inch) from users
Example | Size (px or mm) | Elements |
---|---|---|
96 x 80 | - Image - Thumbnail at top of card - Title - Caption (optional) or Icon (optional) - Action Button (optional) - Hover plate body-text - Hover plate caption 1 text optional - Hover plate caption 2 text optional | |
96 x 80 | - Text hint - Title - Caption (optional) or Icon (optional) - Action Button (optional) - Hover plate body-text - Hover plate caption 1 text optional - Hover plate caption 2 text optional |