Considerations

Benchmarking on Miro: https://miro.com/app/board/o9J_lBHhywI=/

Our first impressions were that ‘right-aligned keys’ and ‘stack columns’ variations of the key/value component are used mostly in interfaces with a lot of free space (e.g App Store on macOS / DigitalOcean) while on tighter spaces ‘rack’ or ‘left-aligned keys’ are used.

In some cases, different variations were used across different screen resolutions, so for example the ‘rack’ variation has been used often on mobile whereas on Desktop ‘left-aligned keys’ was preferred. We could offer to interchange the layout of the component based on break points in the resolution as well.

In order to keep it simple, It seems that we can use just one pattern to cover all use cases with 2 variants: the ‘rack’ and ‘rack columns’ that keep the same ‘rack’ base.

In some cases, it might be the case that this key/value pair pattern doesn’t address all requirements:

For instance when you need to create a list with many items or when you need to quickly scan either keys or values only, we highly recommend using the existing ‘list’ pattern.

  • Use a divider when you have a mix of long and short labels and room.
  • Use right alignment for labels when you don’t have room for dividers.

E.g in Charmhub:

E.g in MaaS