List Card

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.

A. List Card Container

The list card container is the element that holds the header, body, and footer of the list card.

B. Header (Optional)

The header provides context for the items in the list. It can include an icon or image, a title, a counter, a status, a subtitle, and/or a description.

C. Body

The body of a list card with its list contents is made up of list items. Each list item can include an icon or image, a title, a subtitle, a description, and/or action button.

D. Footer (Optional)

The footer includes actions for the entire list and/or the option to expand the list contents.

List card anatomy

Detail view is the accompanying page type for the list component – if it is enabled. When an item from the list is selected, the detailed view content slides over from right to left, and the “Joule” label on the panel header turns into the “Back” button. Tapping on the “Back” button returns the user to the Joule conversation.

Detail view after tapping on a list item cell from the list card

By default, the list card displays three items. If there are more items, a “View More” button must be displayed in the footer area. The user can tap on “View More” to see up to three additional items at a time, with a maximum of twenty items in total.

Expanded list card after tapping on the “View More” button

If there is more than one action available for a particular list item, an overflow button should be used. Tapping on the overflow button opens a selection menu that can contain up to three action items.

Menu popover after tapping on the overflow button

A list card with a header gives you the option to provide context for the list items by adding a title, subtitle, and a short description.

A list card without a header allows you to display just the list items. The list items can have a status, button, overflow menu, or a combination of status and button or status and overflow menu.

List card with header (left) and without header (right)

A list card with a footer allows you to add a call-to-action button that triggers an action associated with all the list items, and/or to expand the list card to view all the list items if there are more to display.

A list card without a footer only shows the list items, with a status or button for each list item, but there are no actions associated with the entire list.

List card with footer (left) and without footer (right)

Max Width

List cards fill the container width but are limited to a maximum size to ensure readability across devices.

Maximum width list cards in compact Joule panel (left) and regular Joule panel (right)