‘Rack column’ variant

The look

|853.4529147982063x62

Anatomy

The ‘rack column’ variant is the ‘rack’ pattern used in 2 or more columns according to the available space.

Values in this variant can’t be wrapped in more than 2 lines. Instead if values are longer than 2 lines, we recommend to use the ‘rack’ variant or truncate the end of the value with ‘…’

Usage

When to use

This is the default variant when the layout doesn’t show values with more than 2 rows .
Use this variant when you have one or more of the following constraints:

  • the width is big enough to show columns: Use the same logic than grids to split into columns
  • you have short keys (that don’t wrap in columns) and short values ( or that can be wrapped and truncated into 2 lines maximum)

when not to use (and recommandations)

Don’t use this variant when you have one or more of the following constraints:

  • the width is two narrow to show columns
  • you have long keys (that would wrap in columns)
  • You have long values or values that can’t be wrapped and truncated into 2 lines maximum
  • When you have a long list of items
    then use the existing ‘list’ pattern (left aligned keys by default), with a divider when you have a mix of long and short labels
  • When you need to quickly scan keys of values only
    then use the existing ‘list’ pattern (left aligned keys by default), with a divider when you have a mix of long and short labels
  • You need to compare values
    Then prefer a table / List view with left aligned keys/Values
    ! right align values when they are numbers

Behaviours

  • The ‘rack column’ variant is static and doesn’t have any hover or click behaviour.
  • Its text can be selected and copied as any other text.
  • Use line-wrapping when using longer value strings so the width of all similar components in one view is equal.
  • The number of columns can vary according to the width of the area, the device and the sizes of keys and values.
  • All columns should have the same width.

Examples

How this can be used on our products (Figma file)