Skip to main content
Last modified: November 18, 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>
  );
};

​
Props

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