Last modified: August 22, 2025
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.
import {
  DescriptionList,
  DescriptionListItem,
  Text,
} from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <DescriptionList direction="row">
      <DescriptionListItem label={'First Name'}>
        <Text>Alan</Text>
      </DescriptionListItem>
      <DescriptionListItem label={'Last Name'}>
        <Text>Turing</Text>
      </DescriptionListItem>
    </DescriptionList>
  );
};

​
DescriptionList props

PropTypeDescription
directioncolumn (default) | rowThe direction that the label and value pairs are displayed.

​
DescriptionListItem props

PropTypeDescription
labelStringText to display as the label.

​
Variants

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

​
Usage examples

  • Display easy to scan information for a sales rep to use on a call.
  • Highlight the most recently updated properties on a company record.

​
Guidelines

  • 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.