A card can be identified as a single, self-contained unit and can stand alone without 


  • A card can stand alone, without relying on surrounding elements for context.
  • The content of a card is assigned to one topic
  • These topics can result in different types of content, which are based on data supplied by the app or machines. The content can contain an icon, a title, an informative text, KPIs, counters, and charts (e.g. Comparison Chart, Bullet Chart, Trend Chart, Column Chart).
  • Read-only cards are used to display information to the user, such as KPIs, features or services offered. Read-only cards are often seen on overview monitors in production area. In this case, no interaction is possible so that no buttons or links are needed.
  • Clickable cards (in the Legato Sapient world this are so called "link boardlets") can be used as navigational items, where the entire card is a clickable state, which redirects the user to a new page or dashboard. Clickable tiles cannot contain separate internal CTAs.
  • Selectable cards work like a radio button, where the entire card is a click target. Selectable cards may contain internal CTAs (like links to more informations) if the internal CTA is given its own click target. Selectable cards work well for presenting options to a user in a structured manner, such as a e.g. control panel.
  • Monitoring functionalities are also a core feature of cards. For example, status updates or quantities can be monitored. Positive, negative or critical states can be displayed using a colour coding system.
  • A news feed card is a special card, that shows short news and can be linked to a detailed version of this news. The content is refreshed at regular intervals.


Question to Oliver Prudlik: do we need expandables cards (like a big drop down menu which folds out)?

  • No labels