🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Details List

Pairs of related information displayed in a list.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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 [email protected]{breakpoint} class:

<dl class="details-list details-list--rows grid [email protected]">
  <!-- ... -->

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


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us