List
Lists are a great way to break content up into digestable chunks.
Anatomy
- Bullet
- List item content
States
There are no states for this element.
Example
Coded example
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
- 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.
- 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.
Code snippet
Figma prototype
Usage guide
Dos and don'ts
When you want to provide steps in a process or important information for users to read.
Content can be multi-line and be made up of icons, title, text and action menu. Keep it clear and concise.
To display a set of text, images or links in a vertical format. Helps reduce the cognitive load on the user.
If there is more than icon, text, action menu consider a table or card pattern. .
It's not suitable for the content.
Put your lists in p tags rather than LI / UL tags.