List: Usage tab

[laurenmrice]

Acceptance criteria

Update the List component Usage tab documentation with the new content template.

---

Overview

• Revise this paragraph to be more clear.
• This should be a general statement of what lists are and what they represent. I feel like this paragraph starts to get into specific information for ordered and unordered lists which could probably be talked about elsewhere on the page.

When to use

• Add this section if needed.

When not to use

• Add this section if needed.
• We do have other similar components like structured list, contained list, and data tables, sometimes we clarify in this section that someone should try using one of those rather than the list component for certain use cases.

Variants

• Remove italics from the first column in the table and make them links instead. They will link down to the respective H2 sections further down the page for each variant.
• Revise the "Purpose" descriptions to make them more clear.

---

Formatting

Anatomy

• Add this section.
• Add image and list below it.

Sizing

• Add this section.
• Mention here that there is a productive and expressive type size of list. The productive list uses $body-01, while the expressive list uses $body-02. The productive list size should be used in productive experiences while the expressive list should be used in expressive experiences. Most likely when designing for products, people will be using the productive list.

Alignment

• Add this section.
• Explain that lists are typically vertically structured. But also you could have multiple columns of a list if there are many list items.
• Add a do/don't image to visually show what is acceptable and what is not.
  • For instance: maybe showing a do as a normal vertical list, and a don't as a horizontally structured list.
• Describe and show an image ofv how nested items in a list look for each variant (unordered and ordered).
• Bonus: Show how the numbers in ordered list should be aligned if the number of items reach 2 or 3 digits.

Placement

• Add this section.
• Explain how lists should be aligned when its near other components or text.
• Add a do/don't image to show good and bad grid alignment.

---

Content

Main elements

• Add this section.
• Reorganize the current content to fit under "Main elements" as bullet points if possible.
• I don't think the current image is relevant in this section and it can be removed.

Overflow content

• Add this section.
• Explain that text in a list should overflow and wrap to multiple lines on smaller screens.
• It may be useful to show an image of what that looks like when text wraps to multiple lines to see the correct alignment.

Further guidance

• Add this section.

---

Unordered list

• Add this section.
• Add a pargraph explaining what an unordered list is an the most common scenarios or when and where to use it.
• Add an in-context image of unordered list in a product UI.

---

Ordered list

• Add this section.
• Add a paragraph explaining what an ordered list is an the most common scenarios or when and where to use it.
• Add an in-context image of ordered list in a product UI.

---

Related

• Add this section.
• Components related to List are contained list, structured list, and data table.