DescriptionList | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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

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

DescriptionListItem props

Prop Type Description
label Required String  Text 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. 

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.