Skip to main content

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

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
    image
    feature-numbered
    feature
    story

Appearance​

Appearance of the card list

primary
highlight
light
dark
hero
default
secondary

Auto Slide​

Carousel moves items automatically.

Overlay​

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

Without Overlay

With Overlay

Size​

Size variation of the carousel item

    Layout default
    Size small
    Size medium
    Size large
    Size xlarge
    Layout image
    Size small
    Size medium
    Size large
    Size xlarge
    Layout feature-numbered
    Size small
    Size medium
    Size large
    Size xlarge
    Layout feature
    Size small
    Size medium
    Size large
    Size xlarge
    Layout story
    Size small
    Size medium
    Size large
    Size xlarge
Site: