[Docs] Updated Lists doc to make it more user friendly

PiperOrigin-RevId: 777422520

Author: Material Design Team

docs/components/List.md

@@ -1,39 +1,76 @@
 <!--docs:
-title: "List"
+title: "Lists"
 layout: detail
 section: components
 excerpt: "Lists are continuous, vertical indexes of text or images."
 iconId: list
 path: /catalog/lists/
 -->
 
-# List
+# Lists
 
-Lists are continuous, vertical indexes of text or images.
+[Lists](https://m3.material.io/components/lists) are continuous, vertical
+indexes of text or images.
 
-**Design**
+![Different types of list items](assets/lists/list_hero.png) List items can have
+supporting text and values
 
-[Material Design guidelines: Lists](https://material.io/go/design-lists)
+**Note:** Images use various dynamic color schemes.
 
-**Single-line list**
+## Design & API documentation
 
-Single-line list items contain a maximum of one line of text.
+*   [Material 3 (M3) spec](https://m3.material.io/components/lists/overview/)
+*   [API reference](https://developer.android.com/reference/com/google/android/material/lists/package-summary)
 
-**Two-line list**
+## Anatomy
 
-Two-line list items contain a maximum of two lines of text.
+![Anatomy of a list](assets/lists/lists_anatomy.png)
 
-**Three-line list**
+1.  Leading video thumbnail (optional)
+2.  Container
+3.  Headline
+4.  Supporting text (optional)
+5.  Trailing supporting text (optional)
+6.  Leading icon (optional)
+7.  Leading avatar label text (optional)
+8.  Trailing icon (optional)
+9.  Leading avatar container (optional)
+10. Divider (optional)
 
-Three-line list items contains a maximum of three lines of text.
+More details on anatomy items in the
+[component guidelines](https://m3.material.io/components/lists/guidelines#30e9b982-6d57-4163-8514-83761650db9f).
+
+## Sizes of list items
+
+List items come in three sizes:
+
+![Three sizes of list items](assets/lists/lists_sizes.png)
+
+1.  **One-line list** items contain a maximum of one line of text.
+2.  **Two-line list** items contain a maximum of two lines of text.
+3.  **Three-line list** items contains a maximum of three lines of text.
 
 ## Demo
 
 Lists are under development. You can see the current version of the
 [Lists Demo](https://github.com/material-components/material-components-android/tree/master/catalog/java/io/material/catalog/lists/)
 in the Material Android Catalog.
 
-## Code
+## Code implementation
+
+Before you can use Material lists, you need to add a dependency to the Material
+Components for Android library. For more information, go to the
+[Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
+page.
+
+![Example of a list](assets/lists/lists_hero.png)
+
+*   Use lists to help users find a specific item and act on it
+*   Order list items in logical ways (like alphabetical or numerical)
+*   Keep items short and easy to scan
+*   Show icons, text, and actions in a consistent format
+
+### Adding list
 
 The
 [Lists Package](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/lists)