Use this pattern to display domain objects with moderate amount of data.

The overview-detail pattern is used when you want to initially display a set of domain objects with moderate amount of details for each object. Users can interact with the object to navigate or reveal more details in the item region to the right side:

The item region can be used to display (and preview) further properties of the selected object as well as present the most important interactions for the object such as e.g.

  • edit
  • delete
  • clone
  • copy etc
  • and eventually further navigation into the object’s details

The objects in the main region can be arranged in any of the following ways: cards, list, tables, depending on use case and context.

animation of overview-detail pattern

Animation of the overview-detail pattern, sliding in detailed information of an object from the right.


Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top