Description list

---

EuiDescriptionList is a component for listing pairs of information together. You can use the component on its own, passing in an object for the list.

You can also use the EuiDescriptionListTitle and EuiDescriptionListDescription components separately to build a list manually.

Reverse style

Setting the textStyle prop to reverse will reverse the text styles of the title and description elements so that the description is more prominent. This works best for key/value type content.

Adding this property to the inline type will not change anything.

As columns

Using the prop type set to column description lists can be presented in an inline, column format.

To return to the typical row format on smaller screens set type to responsiveColumn. The following list will only show the column format on larger screens.

The optional columnWidths prop allows customizing specific column widths (e.g. ['100px', '200px']). The first array value applies to the title column, and the second applies to the description column.

Passing numbers instead of CSS width strings will use a ratio of widths. For example, [1, 3] will render a description column 3x the width of the title column. In other words, titles will have a width of 25% descriptions will have a width of 75%.

For advanced usage, column width strings also accept CSS grid special units, sizing, keywords, and sizing functions.

Inline

Using a prop type set to inline description lists can be presented in an inline, blob format. This is useful for JSON code blocks. Inline description lists are sized smaller than normal lists due to their compact nature.

Customizing appearance

Alignment & Compression

Utilize the align and compressed props to refine the presentation of your description list. These are compatible with both column and inline types.

Vertical spacing

Modify the rowGutterSize prop to control the vertical spacing between EuiDescriptionList elements. This will not affect inline list types.

Horizontal spacing

Adjust the spacing between the title and description with the columnGutterSize prop. This will not affect inline or row types.

Passing className

When using the listItems prop to pass an object of items and you need to also add a className (or other available prop) to the individual pieces, you can use the titleProps and descriptionProps to do so.