Carousel

Do

Keep the height of the cards compact by keeping card content concise. This allows users to better review their own query and the resulting carousel in the Joule panel with minimal scrolling.

Don't

Don’t use colors other than those defined in the Joule Foundations library for the call-to-action buttons in the cards. The colors defined in this library align with Joule theming.

A. Container

The container contains cards in a carousel layout. It has a margin on the left side, followed by a card, then a card that is cut off along the right margin of the Joule panel.

B. Cards

The cards are the objects that the carousel container contains. They display related information and have flexible properties.

Carousel anatomy

Scrolling and Scroll Snapping

When the user swipes left or right on the screen, the card carousel scrolls left or right to show other cards in the container.

Cards in the carousel scroll snap, which means they snap into place at predefined positions during scrolling, rather than scrolling freely. This gives the user a sense of precision and makes scrolling more pleasant.

Error Handling

When at least one card is not able to load within the card carousel, the carousel is replaced with an illustrated message displaying the error.

Swiping interaction for the carousel

Error state for the carousel