Description list

A description list displays terms and their corresponding descriptions.

Usage

Use a description list when you have a set of terms and definitions related to a single item. The content within the definitions is not limited to only plain text. This component can be extremely useful in context of Detail pages for a certain resource or item.

Example of a description list.

Variations

Default

By default, the description list will be formatted so that the term stacks vertically above the description.

Example of a default description list.

Horizontal

Description lists can also be horizontally formatted so that the term and description sit inline and the term comes before the description.

Example of a horizontal description list.

Using columns

Columns can be applied in both vertical and horizontal formats. By default, there will be 24px gutters within the column grid.

Example of a default description list with two columns.
Example of a horizontal description list with two columns.

Term help text

To provide help text about a term in the description list, you may add popovers indicated by a dotted underline on the label. This is recommended in detailed lists where you have many popovers and using a blue link or icon would clutter the page.

Example of a description list with help text.