Details List

Pairs of related information displayed in a list.

How to

The Details List component is used to display pairs of connected information in a list.

The structure is built using the description list (<dl>) element.

Optionally, you can switch from a 'rows' to a 'columns' layout by using the .details-list--cols@{breakpoint} class:

<dl class="details-list details-list--rows grid details-list--cols@md">
  <!-- ... -->
</dl>

In the '--cols' variation, the border separates the items horizontally. You can use it in combo with the grid utility classes.

Categories

• Data Display > List

Bug report & feedback

Component Github page ↗