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 andcompressed 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.
Props
EuiDescriptionList
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop listItems# | Description and type Type: { title: NonNullable<ReactNode>; description: NonNullable<ReactNode>; }[] | Default value |
Prop align# | Description and type Text alignment "center" | "left" | Default value left |
Prop compressed# | Description and type Smaller text and condensed spacing boolean | Default value false |
Prop textStyle# | Description and type How should the content be styled, by default "reverse" | "normal" | Default value normal |
Prop type# | Description and type How each item should be laid out "inline" | "column" | "row" | "responsiveColumn" | Default value |
Prop titleProps# | Description and type Props object to be passed to HTMLAttributes<HTMLElement> & CommonProps | Default value |
Prop descriptionProps# | Description and type Props object to be passed to HTMLAttributes<HTMLElement> & CommonProps | Default value |
Prop rowGutterSize# | Description and type Allows customizing the vertical spacing between rows. "s" | "m" | Default value s |
Prop columnGutterSize# | Description and type Allows customizing the horizontal spacing between columns. Only applies to "s" | "m" | Default value s |
Prop columnWidths# | Description and type Allows customizing specific column widths (e.g. Passing numbers instead of CSS width strings will use a ratio of widths. Only applies to Advanced usage note: column width strings also accept CSS grid special units, [string | number, string | number] | Default value |