DescriptionList | UI components

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

​

Variants

• row:

• column (default):

​

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
• Table
• Statistics
• CrmPropertyList