Carousel

Usage Guidelines:

• Do Use for showcasing featured content (e.g., "Trending Funds") or browsing a gallery of artifacts.

• Do Use when vertical screen space is limited, but horizontal interaction is available.

• Do Not Use for primary navigation or critical settings where hidden items might be missed.

Anatomy & Navigation:

A. The Container (Slide)

The active viewing area.

• Content: Typically contains a Card, Image, or Chart.

• Focus: Only one slide (or a specific group of slides) is fully visible at a time.

B. Navigation Controls (Arrows)

• Direction: Left (<) and Right (>) circular icon buttons floating vertically centered on the edges.

• Behavior: Clicking advances the view by one slide or one "page" of slides.

• State: The "Previous" arrow is disabled/hidden on the first slide; the "Next" arrow is disabled on the last.

Page Indicator (Pagination)

The Carousel supports two distinct styles of position indicators to handle different content densities.

Variant 1: Dots (Visual)

• Visual: A row of small circles. The active slide is solid Brand-Primary; inactive slides are Neutral-Subtle.

• Usage: Best for small sets (2–7 items) where the user doesn't need to know the exact count, just the relative position.

Variant 2: Numbers (Quantitative)

• Visual: A text pill displaying Current / Total (e.g., "1 of 12").

• Usage: Best for large sets (>8 items) or data-heavy contexts where knowing the exact volume of content is important (e.g., "1 of 12 Documents").

Behaviour

• Swipe Support: On touch devices (Tablet/Mobile), the carousel supports horizontal swipe gestures.

• Auto-Play: Generally disabled for enterprise applications to ensure the user controls the pace of data consumption.