Intro

The carousel lets users browse through a set of items and view one item at a time. The user can select navigation buttons to move to the next or previous item. The carousel is most useful when the items in the carousel are visually distinct and the user can see items side-by-side for comparison.

Carousel
Carousel

Usage

These are some best practices when using the carousel with the digital assistant.

Dos

  • Show strong visual representations of the items in the carousel set.
  • Make sure the message before the carousel clearly tells the user what happens when the user selects an item.

Don’ts

  • Don’t use carousel if there is only one item in the set.
  • Don’t show items that are visually similar to each other.

Structure

These are some best practices for the carousel layout.

Main View Carousel

The carousel component includes content, action items, navigation buttons, and page indicators. Using buttons is optional. Refer to the image to the right for each part of the carousel layout below.

A. Content

The content includes all the items in the set to display in the carousel. Each item is shown as a Media Card.

B. Action List Items

You can attach List Card items to the content to let users to perform actions in the carousel. You can list up to three items in the list.

C. Navigation Buttons

Navigation buttons let the user move forward and back through the items in the carousel. The back button is on the left of the carousel and the forward button is on the right. The navigation buttons can display inside the page indicators or inside the content.

D. Page Indicators

The page Indicators show the total number of pages (items) in the carousel and the current page in the set that the user is on. Page indicators display either above or below the content.

Carouse Layout
Carouse Layout


A. Image

Image is center-aligned and scaled to display the full image within the following constraints:

  • Max height: 200 px
  • Max width: 416 px

Empty space is filled with background color: HEX #FFFFFF

B. Header

Header consists of a title and subtitle corresponding with the information in the main view Carousel.

C. Section

The section consists of a maximum of 8 value-pairs (Label Title + Content). Display as 2-columns if there’s 1 line of content. Use a 1-column display if there’s more than 1 line of content.

2-column value-pairs are always displayed above 1-column value-pairs.

D. Value-Pair

A value-pair consists of a Label Title + Content.

In 1-column display, the value-pair content is constrained to a maximum of 250 characters. Truncate after 250 characters using ellipses.

If there is truncated content, the primary action button is “Open in App,” which will allow the user to see the full content.

E. Action List Items

Actions available in the Carousel should be available in the Detail Page as action list items, with a maximum of 3 actions.

Detail Page Structure
Detail Page Structure


Behavior and Interactions

The carousel in a digital assistant user interface for the web follows the Fiori 3 carousel specifications.

Navigation Button

The user moves through carousel items using the navigation buttons (right and left icons). The navigation button changes on hover, while pressing, and on select. The navigation button can display on top of or to the side of each item in the carousel. In addition, paging indicators let the user know where they are in the carousel items.

Navigation Button Behavior
Navigation Button Behavior


Action Items List

All the items of the list are clickable buttons. When the user selects an item, the action is performed and a message displays.

Action Items List
Action Items List


Content

When the user hovers over the content, a light shadow displays below the card to let the user know it is clickable. When the user selects content in the carousel, a new view model opens displaying more details.

Carousel Content
Carousel Content


Detail Page

When the user selects (clicks on) the content, the detail page opens in the panel. The carousel displays up to 3 actions on the carousel. These are also available in the detailed page as action list buttons.

Detail Page
Detail Page


Specifications

Carousel

These visual design specifications apply to the carousel style and spacing.

Carousel Specifications
Carousel Specifications

Navigation Buttons

The navigation button style depends on if the buttons display within the page indicators or over the content. Navigation buttons over the content have a shadow that page Indicators don’t have.

Navigation Button Below Item
Navigation Button Below Item
Navigation Button On Item
Navigation Button On Item


Paging Indicator: Icons

The paging indicator tells the user where they are in the carousel. The current position inside the set of items is displayed using an optional paging indicator (dots).

Page Indicator: Icon
Page Indicator: Icon


Paging Indicator: Count

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Page Indicator: Count
Page Indicator: Count


Action List Item

Follow the specifications for Action List Item in the Fiori Design Guidelines, if the actions are attached to the content. Apply the cozy conversation specification for actions.

Action List Item
Action List Item


Detail Page

There’s a padding of 16 px (1 rem) between the end of the detail page content and the action items list. If the list covers content, the content is scrollable and there’s a gradient overlaying the content above the action items list.



Colors

These colors are the standard theme to use for the carousel.



Mockup