A collection of resources presented as table or cards and paired with a split panel for contextual resource details. It’s effective for quickly browsing or comparing key resource details.
View resources flow chart
Choose the most suitable pattern to represent the resource collection:
Using a split view
Split view is an optional extension of the table view or card view, that adds a collapsible panel for displaying additional resource details. It is effective when users need to quickly view or compare resource details of multiple resources in-context to resource collection. Use a split view only when your users go through workflows such as monitoring or troubleshooting, which often require an additional layer of details on the table/card view. Don't use a split view when standard table/card view with separate details page meets your user's need.
Choosing between table view and card view
Number of resources in the data set
9 or more resources in 99% of use cases
5 or less resources in 99% of use cases
Metadata* being displayed
Shared metadata between resources
Different metadata across resources (different types of databases with different data)
Data that is displayed in columns (text, numerical, status, sparkline)
Data that can be displayed as visuals (charts, videos)
* The configuration details of a resource. Example: ‘date created.’
Number of items in the collection
Tables enable users to quickly scan and sort columns, to compare metadata across many resources.
Use a table if the resources share the same metadata, and your users will be comparing resources to determine which to take action on. Use the card view if users will not be comparing between a large number of resources to determine which to take action on.
Metadata being displayed
Table columns allow for the same metadata type to be displayed across all resources, and allow for easy scanning and comparison of similar metadata.
Cards allow for different metadata to be displayed at the same time in a constrained space.
Tables are optimized for displaying metadata that can fit into data cells, and can be sorted and compared. Cards are optimized for displaying non-columnar data, like charts or images.