Update lists.md

docs/data/material/components/lists/lists.md

@@ -14,7 +14,20 @@ Lists are a continuous group of text or images. They are composed of items conta
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic List
+## Introduction
+
+Lists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images.
+
+Material UI Lists are implemented using a collection of related components:
+
+- List: a wrapper for list items. Renders as a `<ul>` by default.
+- List Item: a common list item. Renders as an `<li>` by default.
+- List Item Button: an action element to be used inside a list item.
+- List Item Icon: an icon to be used inside of a list item.
+- List Item Avatar: an avatar to be used inside of a list item.
+- List Item Text - a container inside a list item, used to display text content.
+- List Divider: a separator between list items.
+- List Subheader: a label for a nested list.
 
 {{"demo": "BasicList.js", "bg": true}}
 
@@ -26,7 +39,14 @@ The last item of the previous demo shows how you can render a link:
 </ListItemButton>
 ```
 
-You can find a [demo with React Router following this section](/material-ui/integrations/routing/#list) of the documentation.
+## Basics
+
+```jsx
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+```
+
+You can find a [demo with React Router following this section](/material-ui/guides/routing/#list) of the documentation.
 
 ## Nested List