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](/images/definitionlist.322312bb4a540603.png)
Variations
Default
By default, the description list will be formatted so that the term stacks vertically above the description.
![Default](/images/default.19b1464ca1366b4a.png)
Horizontal
Description lists can also be horizontally formatted so that the term and description sit inline and the term comes before the description.
![Horizontal](/images/horizontal.936e283a31eef08c.png)
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 columns](/images/default2column.f107be3367ad1e22.png)
![Horizontal with 2 columns](/images/horizontal2column.8054990587e263cb.png)
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](/images/termhelptext.74a094386d6fbefa.png)
View source on GitHub