PatternFly

Description list

A description list contains 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.

Definition list

Variations

Default

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

Default

Horizontal

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

Horizontal

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