Description list

A description list contains terms and their corresponding descriptions.


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.

Definition list



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



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


Using columns

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

Default with 2 columnsHorizontal with 2 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.

Term help text
View source on GitHub