Contained list purpose and content
Contained lists group content that is similar or related and can contain read-only or interactive information. Contained lists are commonly used inside of containers like cards, sidebars, and disclosure situations.
contained-list
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
When to use contained lists
Use contained lists on a page inside of small spaces or in disclosure situations. Use when including interactive elements or inline actions in a list. Use to logically group items that follow the same content structure.
When not to use contained lists
Do not use if the list content needs to be nested more than one level deep and becomes overly complex and lengthy; use the data table component instead. Do not use if the list needs to contain multiple column headers; use the structured list component instead.
Contained list variants
Contained lists have two variants: On-page list, used when placing the list in a persistent context like the main area in the user interface, such as on a card or in a sidebar. Disclosed list, used when the list is shown within a temporary context, for example within a popover or layer that is elevated by a drop shadow or border.
Contained list anatomy
Contained lists are made up of: list header area (area to group the succeeding list items), list item area (area to group text and elements in a list row), list title (descriptive name for the group of list items), list item (the content in a list item row), non-interactive icon optional (a decorative icon to help visually describe a list item), search icon button optional (an icon button for search or filtering functionality), and interactive element optional (an interactive element in the header or row such as a button, link, icon, tag, or toggle).
Contained list stacking with padding
When stacking multiple on-page lists, there should be 16px padding between each list. When stacking multiple disclosed lists, stack them to be flush with 0px padding between each other.
Contained list header scrolling behavior
Contained list header areas can be sticky and fixed in place while the list item rows scroll underneath. This functionality is optional depending on the use case.
Contained list title guidelines
A list title is a descriptive name for the group of list items. List titles should be short and clear, ranging from one to three words to describe the list group. Use sentence case capitalization.
Contained list item content guidelines
List item text can vary but the structure of the content should be similar per row in the same contained list. List item text can have multiple lines of concise content, but should not contain multiple paragraphs of lengthy information. Use sentence case capitalization.
On-page list placement
On-page lists should span the entire width of the container they are placed within to make the best use of space and to achieve vertical type alignment with other text and components on the page.
On-page list height sizes
The on-page list comes in four height sizes: extra large (64px), large (48px), medium (40px), and small (32px). The large height size is the default size. The list header height is always fixed, while list item row heights can vary based on the amount of content in each row. By default each list item row height follows the extra large, large, medium, or small height size for one line of content.
On-page list styling
The on-page list styling has no visible background header with fixed information. If there are scrolling capabilities, the header will remain sticky and have a background layer to differentiate it from the list item rows scrolling beneath it.
Disclosed list placement
Disclosed lists should span the entire width of the container they are placed within to make the best use of space.
Disclosed list height sizes
The disclosed list header has a 32px height and the list item rows by default have a 48px height. The list header height is always fixed, while list item row heights can vary based on the amount of content in each row. The content in each row is flexible, but by default each list item row height follows a 48px height for one line of content.
Disclosed list styling
The disclosed list styling has a background layer underneath the header. Each header has a smaller height than the on-page list styling to take up less real estate in the smaller and scrollable spaces it usually appears in.
Contained list inset row dividers
By default, use extended row dividers for row items in contained lists. Typically indented row dividers are used when placed close to other components that also contain row dividers so they do not collide with each other and create visual tension.
Contained list clickable rows
Contained lists support clickable rows as an optional feature.
Contained list inline actions
Contained lists can include inline actions, such as closing or dismissing row items in the list.
Contained list interactive elements
Contained lists can have interactive elements in headers and rows, such as links, icon buttons, and toggles. Contained lists can also have multiple row columns. Additional row columns act as list item details pertaining to the first list item in the row. If your list has an excess of row columns and needs multiple column headers, use a data table instead.
Contained list non-interactive icons
Contained lists can have non-interactive icons positioned before the text in each row to help visually describe the list item, category, or status. These icons are decorative elements and are used for visual purposes only. Icons should typically be the same color as the text in the row unless they are status indicators.
Contained list search and filtering
Contained lists can include a search or filter functionality. The search or filter can collapse and expand in the list header area or stay persistent on the page below the list header area, depending on the use case.