Carousel

The Carousel Component designed to showcase a series of items in a visually appealing and interactive manner.

List Items

List items to display in the carousel.

• Title

  Displays at the bottom of the carousel card

• Image

  Image to be displayed within the carousel card

• Link

  Link to navigate when user clicks on the carousel item

Carousel Layout

Layout of the carousel.

Options:

• default
• image
• feature-numbered
• feature
• story

💡 Tip:: Use 16:9 ratio image for default, Image and feature-numbered layouts.

default

Sample Title

Sample Title

Sample Title

Sample Title
image




feature-numbered

Sample Title
 
1

Sample Title
 
2

Sample Title
 
3

Sample Title
 
4
feature




story

Sample Title

Sample Title

Sample Title

Sample Title

Appearance

Appearance of the card list

primary

Sample Title

Sample Title

Sample Title

Sample Title

highlight

Sample Title

Sample Title

Sample Title

Sample Title

light

Sample Title

Sample Title

Sample Title

Sample Title

dark

Sample Title

Sample Title

Sample Title

Sample Title

hero

Sample Title

Sample Title

Sample Title

Sample Title

default

Sample Title

Sample Title

Sample Title

Sample Title

secondary

Sample Title

Sample Title

Sample Title

Sample Title

Auto Slide

Carousel moves items automatically.

Sample Title

Sample Title

Sample Title

Sample Title

Sample Title

Sample Title

Sample Title

Sample Title

Overlay

Adds an overlay container on top of the image. This helps to display the title in a prominent manner.

Without Overlay

Sample Title

With Overlay

Sample Title

Size

Size variation of the carousel item

Layout default
Size small

Sample Title

Sample Title

Sample Title

Sample Title
Size medium

Sample Title

Sample Title

Sample Title

Sample Title
Size large

Sample Title

Sample Title

Sample Title

Sample Title
Size xlarge

Sample Title

Sample Title

Sample Title

Sample Title
Layout image
Size small




Size medium




Size large




Size xlarge




Layout feature-numbered
Size small

Sample Title
 
1

Sample Title
 
2

Sample Title
 
3

Sample Title
 
4
Size medium

Sample Title
 
1

Sample Title
 
2

Sample Title
 
3

Sample Title
 
4
Size large

Sample Title
 
1

Sample Title
 
2

Sample Title
 
3

Sample Title
 
4
Size xlarge

Sample Title
 
1

Sample Title
 
2

Sample Title
 
3

Sample Title
 
4
Layout feature
Size small




Size medium




Size large




Size xlarge




Layout story
Size small

Sample Title

Sample Title

Sample Title

Sample Title
Size medium

Sample Title

Sample Title

Sample Title

Sample Title
Size large

Sample Title

Sample Title

Sample Title

Sample Title
Size xlarge

Sample Title

Sample Title

Sample Title

Sample Title