The Media Carousel is a reusable component used to display images or videos in a horizontal, scrollable format. In the Sharjah Design System, the carousel is defined as a single component with three layout variants, allowing teams to showcase visual content consistently across different contexts while maintaining a unified interaction pattern.

Purpose

The purpose is to:

Showcase images or videos in a limited space
Highlight galleries, campaigns, or featured content
Support visual storytelling without overwhelming the page
Present multiple related media items in a structured flow

Avoid using carousels for critical content that must always be visible.

Component Structure

Carousel – A full-width or container-based carousel used for general media display
Fixed image – Showing 1 image only in horizontal view
Thumbnail Media Carousel – 2 cards per raw as carousel

Accessibility Guidelines

All controls must be keyboard accessible
Provide alternative text for images
Avoid auto-playing videos with sound
Ensure focus indicators are clearly visible

Responsive Behaviour

Carousel adapts to screen width without cropping key content
Touch gestures supported on mobile devices
Media maintains aspect ratio across breakpoints

Previous FAQs Next Gallery

Quick Access

Home Getting Started UI Kit Roadmap

Guidelines

Typography Colour System Iconography Layout and Spacing Input & Fields

Buttons Responsive Accessibility Design Tokens Content Design

Contact

sds@sdd.shj.ae +971 600 567890

Last updated on 10/09/2026