List
Lists are for showing a set of items in sequence, and can be nested to show some hierarchy.
Usage
Use a list to group related items and organize them vertically for easy scanning.
Types
Clarity has three types of lists: unordered, ordered, and unstyled.
Code Examples
Unordered Lists
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Ullamco laboris nisi ut aliquip
- Consequat
- Adipisicing
- Exercitation
- Reprehenderit in voluptate
- Mollit anim id
Ordered Lists
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Ullamco laboris nisi ut aliquip
- Consequat
- Adipisicing
- Exercitation
- Reprehenderit in voluptate
-
Mollit anim id
- Consequat
- Adipisicing
- Exercitation
- Reprehenderit in voluptate
Unstyled Lists
- Id est laborum
- Dolore eu fugiat
- Occaecat cupidatat
- Deserunt mollit anim
Compact Lists
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Ullamco laboris nisi ut aliquip
- Consequat
- Adipisicing
- Exercitation
- Reprehenderit in voluptate
- Mollit anim id