Lists

List tiles present collections of related content in a consistent format, using hierarchy to enhance readability by prioritizing a consistent type or set of content. This helps users to more easily find the most important information within the collection of content.

The majority of space on a list tile should be dedicated to the primary action.

Because actions are not distinguishing elements of list tiles, place supplemental actions on the right side of the tile.

Sometimes the primary action is an action button. You can place them in front.

Inset dividers subdivide related content, such as phone numbers from email addresses from street addresses in a contact detail.

Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line

Full-bleed dividers separate distinct content sections.

You can mix any element together to create a list which suits your needs.

Creating a sortable list is really easy. You only have to add data-sortable="true" to your code and you can start dragging.

Use the sortable list in combination with the styled checkboxes to create the perfect todo list.

The nestable list plugin is also included. You can use the button classes to style it the way you like.