Skip to main content

Cards

Cards contain content and actions about a single subject.

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
Image Card Default 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
Image Text Default 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