Details Panel

What

A details panel is a section that shows greater detail about a selected element within the content panel.

Why

To show specific details about an element selected in the content panel

Where

Often on the far right hand side of the screen

Best Practices

  • If it is “pinnable”, move underlying content over to allow a user to access while panel is “pinned” open. (Desktop only)
  • Mobile: Likely to take up entire screen
  • Variations: Pinnable slide out drawer, Fixed, Read only/Interactive

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...