Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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 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.
Last modified on March 30, 2026