⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Carousel

Carousel

A Slider Carousel is a flexible UI component that shows a series of images, cards, or other content in a rotating, scrollable way. It boosts user engagement by letting users browse content interactively.

Usage

  • Aware users about series of information in rotating formate.
  • Display multiple product features in a compact space, allowing users to swipe or click through.
  • Showcase customer testimonials or reviews in a sliding format to build credibility.
  • Display promotional banners that users can scroll through.

Anatomy

The content slider combines active and inactive lines, enabling easy navigation and interaction across different sections or slides.

Variant

The slider carousel is available in two variants: line and dot.

Line Slider

Heading 1

Heading 2

Heading 3

Heading 4

Dot Slider

Heading 1

Heading 2

Heading 3

Heading 4

Options

Slider Carousel options in line and dot variants.

Line

Line / 2 Number

Heading 1

Heading 2

Line / 3 Number

Heading 1

Heading 2

Heading 3

Dot

Line / 2 Number

Heading 1

Heading 2

Line / 3 Number

Heading 1

Heading 2

Heading 3

Specifications

Structure and spacing measurements for carousel.

Live Demo

The Carousel is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Bottom Navigation
Cards

Helix - HDFC Life 2025