[Card Layout] Single section, single list

[johanstromqvist]

Visual

Source

Builder needs

In order to design and implement this pattern consistently, builders need to:

1. Understand basic spacing between heading and list
2. Understand basic spacing between between list items
3. Know when and why to make exceptions that accommodate common scenarios

Key information

1. Default rule: Use space-2 (8px) between heading and list, and space-1 (4px) between list items
2. Rule: space-1 (4px) is always reserved for the closest relationship. When list items have children, that relationship is between those children. In those cases the list items use a space-2 (8px) gap between peers.
3. Rule: List items can have inner white space caused by padding or content such actions. In those cases, reduce the gap towards space-0 (0px) until the perceived gap is as close to the desired value.

Tasks

Beta Give feedback

1. Draft visual for critique
2. Outline what builders need to understand
3. Draft key information
4. Help builders distinguish line item types; default, with children, with white space