[material-ui][docs] Add docs for complementary List components (#41329)

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}}
 
@@ -28,6 +41,13 @@ The last item of the previous demo shows how you can render a link:
 
 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';
+```
+
 ## Nested List
 
 {{"demo": "NestedList.js", "bg": true}}