‘Rack’ variant

The look

Anatomy

The ‘rack’ variant is not utilizing any other Vanilla components. Instead, it consists of a table heading and a paragraph underneath.

Values in this variant can be wrapped in more than 2 lines.

Usage

When to use

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 that can’t be wrapped or truncated (e.g. Mac address)

When not to use (and recommandations)

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

  • the width is big enough to show the ‘rack columns’ variant
  • 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
  • you have short keys (that don’t wrap in columns) and short values
    Then prefer the ‘rack columns’ variant

Behaviours

  • The ‘rack’ variant is static and doesn’t have any hover or click behaviour.
  • Its text can be selected and copied as any other text.

Examples

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