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

---
id: 57eca1cc-957d-4f2a-b357-034507c589a2
---

# DescriptionList | UI components

> Learn about the DescriptionList component for use in UI extensions.

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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guide-description-list-component.png" alt="design-guide-description-list-component" />
</Frame>

1. **Label:** describes the information being displayed.
2. **Value:** the information to display, contained in a `Text` component.

```jsx theme={null}
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**

| **Prop**    | **Type**                    | **Description**                                             |
| ----------- | --------------------------- | ----------------------------------------------------------- |
| `direction` | `column` (default) \| `row` | The direction that the label and value pairs are displayed. |

**`<DescriptionListItem>` props**

| **Prop** | **Type** | **Description**               |
| -------- | -------- | ----------------------------- |
| `label`  | String   | Text 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`:

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-ext-component-descriptionlist.png?width=516&height=68&name=ui-ext-component-descriptionlist.png" alt="ui-ext-component-descriptionlist" />
</Frame>

* `column` (default):

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/ui-extension-component-vertical-description-list.png?width=87&height=239&name=ui-extension-component-vertical-description-list.png" alt="ui-extension-component-vertical-description-list" />
</Frame>

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

## Related components

* [List](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/list)
* [Table](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table)
* [Statistics](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/statistics)
* [CrmPropertyList](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-property-list)