Skip to main content

The DescriptionList component renders pairs of labels and values. Use this component to display pairs of labels and values in a way that's easy to read at a glance. It also contains a DescriptionListItem subcomponent.

design-guide-description-list-component

  1. Label: describes the information being displayed.
  2. Value: the information to display, contained in a Text component.
PropTypeDescription
directioncolumn (default) | rowThe direction that the label and value pairs are displayed.
PropTypeDescription
label RequiredStringText to display as the label.

By default, list items will be stacked vertically. You can use the the direction prop to stack them horizontally.

  • row:

    ui-ext-component-descriptionlist

  • column (default):

    ui-extension-component-vertical-description-list

  • Display easy to scan information for a sales rep to use on a call.
  • Highlight the most recently updated properties on a company record.
  • DO: keep copy succinct, ideally one word each for the label and value.
  • DO: use the horizontal orientation for horizontal layouts, and vertical orientation for column layouts.
  • DON'T: use this component to display long strings of text.
  • DON'T: use this component for lists that you want to be editable in the UI.