List - HubSpot docs

The List component renders a list of items. Each item in List will be wrapped in <li> tags. A list can be styled as inline, ordered, or unordered with the variant prop.

import { List } from '@hubspot/ui-extensions';

const Extension() {
  return (
    <List variant="unordered-styled">
      <Link href="www.hubspot.com">List item 1</Link>
      <Link href="www.developers.hubspot.com">List item 2</Link>
      <Link href="www.knowledge.hubspot.com">List item 3</Link>
    </List>
   );
}

Props

Variants

By default, lists will be configured as vertically stacked list items without bullets. To customize the styling, use the variant prop, as shown below. To create a bulleted unordered list:

<List variant="unordered-styled">
  <Link href="www.hubspot.com">List item 1</Link>
  <Link href="www.developers.hubspot.com">List item 2</Link>
  <Link href="www.knowledge.hubspot.com">List item 3</Link>
</List>;

To create a numbered list without styling:

<List variant="ordered">
  <Link href="www.hubspot.com">List item 1</Link>
  <Link href="www.developers.hubspot.com">List item 2</Link>
  <Link href="www.knowledge.hubspot.com">List item 3</Link>
</List>;

To create a numbered list with styling:

<List variant="ordered-styled">
  <Link href="www.hubspot.com">List item 1</Link>
  <Link href="www.developers.hubspot.com">List item 2</Link>
  <Link href="www.knowledge.hubspot.com">List item 3</Link>
</List>;

To stack list items horizontally:

<List variant="inline">
  <Link href="www.hubspot.com">List item 1</Link>
  <Link href="www.developers.hubspot.com">List item 2</Link>
  <Link href="www.knowledge.hubspot.com">List item 3</Link>
</List>;

To stack list items horizontally with a divider between each item:

<List variant="inline-divided">
  <Link href="www.hubspot.com">List item 1</Link>
  <Link href="www.developers.hubspot.com">List item 2</Link>
  <Link href="www.knowledge.hubspot.com">List item 3</Link>
</List>;

​Props

​Variants

​Related components

Props

Variants

Related components