List Card
Joule / Components / List Card
Intro
The list card shows a set of items or links in a list format with a flexible structure.
List card in compact Joule panel (left) and expanded Joule panel (right)
Do
Use list cards to show people, products, services, organizations, actions, options, and more. Users can view, share content, and take actions from the list.
Don't
Don’t use list cards when you have too much content to display.
- Keep relevant to the topic. List items can display more options or information for context, for example, a status, button, and overflow menu.
- Keep list item titles consistent across list items.
- Keep the left accessories of the list items consistent. For example, either all list items show an avatar or none of them do.
- Keep the right accessories of the list items consistent. For example, if one list item shows an overflow menu, all other items should as well.
- Present relevant information and prioritize it accordingly in the list items, by level of importance from top to bottom.
Anatomy
A. Header (Optional)
The header provides context for the items in the list. Its properties are flexible to suit various use cases. These properties include a title and optionally an avatar, subtitle, description, status row, and counter.
B. Body
The body contains the list items within the list card. The properties of these list items are flexible to suit various use cases. These properties include a title, and optionally an avatar, subtitle, description, status, and button/overflow icon button
D. Footer (Optional)
The footer includes up to two action buttons. These buttons may include a “View More” button and an optional flexible button.
List card anatomy
Behavior and Interaction
Detail View (Optional)
When a list item is selected and detail view is enabled, the Joule panel will transition to a detail view of the list card. The user may return to the Joule conversation by selecting the “Back” button within the detail view page.
Interaction of opening the detail view upon selecting a list item
“View More”
The list card displays three items by default. When there are more than three items, the footer must be shown and the “View More” button must be displayed in the footer. Selecting “View More” will display three additional list items, up to twenty items maximum. When the maximum number of list items are displayed, the “View More” button will become disabled.
It is recommended to show the header when there are more than three items in the list so that the counter may be shown.
Interaction of selecting “View More” to show the maximum number of list items in a list card
Overflow
When there is more than one action available for a particular list item, an overflow button should be used. Selecting the overflow button will open a menu that may contain up to three action items
Interaction of selecting the overflow icon of a list item and opening the action menu
Error Handling
When there is no relevant card content or data to display, it is important to show the proper error handling type. Refer to the Joule Error Handling Guidelines for more details.
Adaptive Design
Max Width
List cards fill the container width but are limited to a maximum size to ensure readability across devices.
Maximum width list card in compact Joule panel (left) and expanded Joule panel (right)
Resources
Joule for iOS: List Card
Joule for Web: List
Related Components/Patterns: Cards Overview, Detail View, Outbound Navigation, Error Handling