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

Projects

Progress value is 30%

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
}

Changelog

  • ✅ Component created
    🗓 June 13, 2019

Bug Report & Feedback

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

✅ Project duplicated

✅ Project created

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