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


Progress value is 30%


Custom unordered/ordered list component.

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 List component is used to display a list or related items.

The component includes a set of CSS custom properties to help you customize the list:

.list {
  --list-v-space: 1; // control vertical space
  --list-offset: 1;  // control offset of sublists

Edit the --list-v-space multiplier to increase/decrease the space between list items. Update the --list-offset multiplier to increase/decrease the offset of the sub-lists.

For the unordered/ordered lists, edit the CSS variables to modify the size of the bullet elements and the gap between the bullet and content:

.list--ul { // unordered list
  --bullet-size: 7px; // dot width and height
  --bullet-margin-right: var(--space-xxs); // gap between bullet and content


✅ Project duplicated

✅ Project created

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