Visuals

UI Kit

Examples

To keep in mind

• Anatomy:
  • Title (required):
    • 1-3 words
  • Label (optional):
    • Categorizing labels (1-2 words)
  • Metadata (optional)
    • Key information to surface that helps people decide between items
  • Description (optional):
    • On hover: Extra information on hover that is not critical and can be found elsewhere in the platform
    • Persistent: Replacing the illustration, a persistent description shows meaningful information that might not be found elsewhere in the platform
  • Illustration (optional):
    • Adds visual interest
    • Distinguishes items
  • Card
    • Clickable area:
      • Preferred: The entire card is clickable and leads to the same place as the call to action default button.
      • Optional: If there need be other clickable areas inside the card such as a link in the description, the entire card is not clickable. Instead, only the links and buttons are clickable.
    • Background colors:
      • People try to discern meaning behind different background colors. Try to stick to one color on a page or within a section.
  • Supplementary footer:
    • Call to action default button (required):
      • Consider if the label needs to be different across items, especially for people using screen readers. If the labels are the same, they might also need ARIA tags to indicate which card title the button is labeled by or description it’s described by.
    • Secondary control action button (optional):
      • Aim for 1 word only
• Interactions:
  • Expand and collapse
    • TBD
  • Hover and reveal
    • On hover, reveal more supplementary content. This is useful when the user may not have been able to make a decision from the information that’s immediately available.
    • Slide fade content up and down when revealing and hiding supplementary content.
• Layout:
  • Max. 4 per row in 1080px area
  • Aspect ratios:
    • TBD

When to use

• Use tiles for visually interesting items that we want to highlight or have featured.
• Use tiles to help people choose between items.

When not to use

• For a single item, use a guidance block instead.
• For items without much visual interest, use a list instead.

See also

• Buttons
• Cards

External Links

Here are some examples of other existing design systems:

• Material: Cards
• Polaris: Cards
• Polaris: Cards
• Carbon design: Cards
• Thumbprint: Cards
• Liferay: Cards
• Liferay: Cards
• Liferay: Cards