Cards are shaped based on their purpose. The design of cards in general is flexible and embraces many user interface
elements. In Monsha’at design system, cards share major three common types according to their size which are:

  1. Default,
  2. Wide, and
  3. Small.

Default card

Several types of cards displayed below with the default dimensions. Examples of cards in default size are presented in
this section.


Wide card

Wide cards aim to display content in a horizontal view. This type of cards organizes content vertically on the screen
and it is commonly applied in comment sections.



small cards display simple information about major categories.




Cards could be displayed in a form of a timeline to show a chronological order for certain activities.



Progress card

Progress cards display progress of states for the activities which will change according to the status of completing
each activity.