CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

List

Custom unordered/ordered list component.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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
}

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.