Sliders and featured area solutions.

2 Sections


Slider component is used to show more data in a less space, by hiding data and keeps it accessible through an micro interaction from user side.

What’s Our Slider Style?

A horizontal scrolling slider where the user can easily drag or scroll inside the slider area to show the rest of visible items.

Pros of  horizontal scrolling slider

  • Ease of use, through scrolling or dragging.
  • Fully support for mobile devices.
  • No Clicks required.
  • The hidden data – at least a part of it – is visible, which is a good trigger for scrolling or interact with to discover more.

Common Use Cases:

  1. Training program list of content.
  2. Quotes and Stories.

Horizontal Scrolling Slider



Components breakdown:

  1. The horizontal scrolling experience scroll bar and indicator.
  2. The main content (cards of data).

Note: For the main content (cards of data) it could be many types. each card has it’s own guidelines which should be implemented as well.


  • No.1: 40px.
  • No.2: 40px.
  • No.3: 40px.
  • No.4: 40px (follow the card guidelines).
  • No.5: 40px (follow the card guidelines).
  • No.6: 30px (follow the card guidelines).