Lists are for showing a set of items in sequence and can be nested to show hierarchy.

Usage

Use a list to group related items and organize them vertically for easy scanning.

Types

There are three types of lists: unordered, ordered, and unstyled. Lists can be nested and the varieties can be mixed within nested groupings.

Unordered List

Use an unordered list when the order does not matter.

• Chicken Breast
• Flour
• Garlic
• Honey

Ordered List

Use an ordered list when you need to convey a priority, hierarchy, or sequence between list items.

1. Split chicken breast in half
2. Dust chicken with flour
3. Sear chicken, add butter, garlic, vinegar, soy sauce, honey
4. Simmer until the sauce thickens

Unstyled List

Use an unstyled list when styling is unecessary to improve comprehension or hierarchy.

• Calories: 323 cal
• Carbohydrates: 23g
• Protein: 28g
• Fat: 13g

Nested Lists

You can also mix and match list styles based on your use cases.

• Gluten free
• Soy sauce
• Other proteins
  • Tofu
  • Prawns/shrimp
  • Fish
• Nutrition

Compact List

You can also mix and match list styles based on your use cases.

• Chicken Breast
• Flour
• Garlic
• Honey