Overview

Purpose

The Carousel is an infinite slideshow for cycling through a series of content (static images or videos).

Anatomy

The Carousel component can be broken down into the following elements -

1. Media Area
   Main area to display an image or video.

2. Media Controls (optional)
   Pause and mute buttons for video content.

3. Peek (optional)
   Shows previous and next slider item, includes a Scrim overlay.

4. Navigation (optional)
   Icon Button with arrows to navigate to previous or next slider item.

5. Info Area (optional)
   Space to add in extra content like logo, info text or a CTA. Includes a flexible Scrim overlay for better legibility.

6. Pagination
   For orientation and navigation.

7. Trim (optional)
   Coloured trim below the main image/video.

Info Area Anatomy

The info area can be broken down into the following elements -

1. Scrim (optional)
   Overlay to make the content legible.

2. Plinth (optional)
   Space for plinths.

3. Additional text (optional)
   Space to add in extra content.

4. CTA (optional)
   Optional Text Link or Button to trigger a call to action (CTA).

Variants & States

• Breakpoint: Mobile, Tablet, Desktop, Max Width
• Appearance: Default, Light
• Info Area: on/off
• Media Controls: on/off
• Peek: on/off
• Navigation: on/off
• Trim: on/off

The Carousel component is made up of subcomponents that offer further options:

Peek (right and left)
Scrim: on/off

Info Area

• Scrim: on/off
• Plinth: on/off
• Text: on/off
• CTA: on/off