Cards

Cards, Tails, Boxes and more.

6 Sections

Introduction

With the rise of responsive web and mobile applications, card layout is becoming one of the best components that conveys content fluidly on various screens for the user. Many individual pieces of content are aggregated and linked to form one solid experience. When applied right, cards can bring the efficiency and usability into the design. Cards adheres to minimalism and simplicity which is one of Monsha’at recommended design principles.

What is Card component?

The Card component serves as a mean to display content and action about a specific topic including media, text, and user interface controls. User interface elements in cards such as texts and images are organized in a way that shows hierarchy. Cards work as an entry point to more detailed information.

Common Use Cases

  • Displaying follow requests with relevant information about people who are interested in following the user

As displayed below, cards can contain a list of cards that shares the same elements image of the person, discipline, and interactive buttons which give the user the choice to accept or ignore these requests. Cards provide the possibility for users to select the element they want to pay attention to.

  • Detailing relevant information about suggested companies using scrollable cards

Card layout can improve usability by taking advantage of horizontal scrolling and allowing efficient presentation of greater amount of content in a simpler way. For example, displaying content of relevant companies may add undesirable complexity to the page when displayed as a grid view. Cards powered with horizontal scrolling may be used to overcome such concern. However, scrollable cards must be used wisely in design.

 

 

Types

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

small cards display simple information about major categories.

     



                            

Timeline

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.

 


        
                                    

 

 

Types

Weights

News

  1. Whitespace from both sides 40px.
  2. Whitespace between image and text 30px.
  3. Whitespace between text 20px.
  4. Whitespace at the bottom 40px.
  5. Height 440px.
  6. Font size 18px and 14px.
  7. Content is aligned bottom-left.

Review

  1. Whitespace 70px
  2. Whitespace 40px
  3. Whitespace 35px
  4. Font sizes 18px, 14px, 10px.

 

Discussion

  1. Top whitespace 60px.
  2. Whitespace between header text and paragraph 30px.
  3. Whitespace at the bottom 50px.
  4. Whitespace between text 20px.
  5. Height 440px.
  6. Font size 18px and 14px.
  7. Content is aligned centered vertically.

Events

  1. Left and right vertical alignment 40px
  2. horizontal whitespaces between text 20px
  3. bottom whitespace 40px

Feed item

  1. Whitespaces between texts 12px
  2. Outer whitespace 20px
  3. Upper whitespace 30px

Links with preview

  1. Whitespaces between 10px
  2. Whitespace 20px

Management card

Whitespace by order:

  1. 40px,
  2. 40px,
  3. 15px,
  4. 26px,
  5. 40px

Font sizes ordered from top to bottom: 18px, 14px, 12px.

Graduation

  1. Whitespace 40px
  2. Whitespace 20px
  3. Whitespace 30px
  4. Whitespace 14px
  5. Width of interest item 350px
  6. Font sizes 16px & 12px.

Experience

  1. Whitespace 40px
  2. Whitespace 30px
  3. Whitespace 60px
  4. Radius 40px
  5. Font sizes 16px & 12px

Challenge

Whitespace by order:

  1. 40px
  2. 30px
  3. 40px
  4. 45px
  5. 22px
  6. 28px
  7. 45px

Font sizes 28px, 18px, & 20px.

 

Challenge site

Whitespaces:

  1. 40px
  2. 26px
  3. 45px

Ideas card

Whitespaces

  1. 40px
  2. 70px
  3. 70px
  4. 40px
  5. 40px

Story

Whitespaces by order:

  1. 40px
  2. 40px
  3. 20px
  4. 40px
  5. 40px

Category

Whitespaces 40px.

Portal service*

Whitespaces by order:

  1. 40px
  2. 40px
  3. 40px
  4. 53px
  5. 36px
  6. 15px
  7. 80px

Font sizes 20px, 12px, & 14px.

Consultant

Whitespaces:

  1. 20px
  2. 40px

 

Training suggestion

  1. Whitespace from both sides 40px.
  2. Whitespace between icon and text 20px.
  3. Height 440px.
  4. Font size 22px and 14px.
  5. Content is aligned bottom-left.

Training course

Whitespaces:

  1. 40px,
  2. 40px,
  3. 26px,
  4. 40px

Font sizes: 18px & 12px.

Training Event

Whitespaces:

  1. 40px
  2. 30px
  3. 30px
  4. 10px
  5. 13px
  6. 20px
  7. 40px

Font sizes: 18px, 16px, & 14px.

Training

Whitespaces:

  1. 40px
  2. 30px
  3. 10px
  4. 30px
  5. 40px

Font sizes: 20px & 16px.

Single intern

  1. Vertical whitespace 40px.
  2. Whitespaces in a descending order: 20px, 48px, 10px, 25px, 10px, 20px.

Franchise

Whitespaces:

  1. 40px
  2. 60px
  3. 50px
  4. 30px
  5. 24px
  6. 12px
  7. 14px

Font sizes 14px, 28px, 22px, 14px.

Single file

Whitespaces by order:

  1. 40px,
  2. 40px,
  3. 13px,
  4. 14px,
  5. 40px

Font sizes 18px & 14px.

Status

There are several ways to show the change of state based on user interaction.

Status

 On Hover

Cards are displayed in groups in their default status. Whenever it is intended to hover over a card, a simple effect is displayed such as change of color and width of the card to show the intended interaction.

              

 

Progress

Cards containing progress of activities shows the activities as a horizontal line. There are three types of showing progress

Normal – default

Active progress bar

When the application starts, the first icon in the progress bar turns orange initiating a start of the process.

In progress

The progress state is shown as a change to more prominent color in the progress bar.

Interactions

Similar to buttons, interactions can be under two categories which are interactions of cards as a group and interaction within each card.

Group of cards:

  • Horizontal scrolling

Horizontal scrolling is often used in viewing a group of default type of cards assorted horizontally. Horizontal scrolling is represented by a slider positioned under the card group.

  • Expanding

Expanding is intended for wide type of cards which are assembled vertically. “Show more” action works as the option of expanding the card group.

Individual card:

Similar to buttons, the interactions of the elements within the card that were designed with an intention to display more information can be conveyed as the following:

  • From Disabled to Enabled.
  • Hover / Click.
  • Progress indication.

 

 

 

Use Cases

News

Review

Discussion

Events

Feed item

Links with preview

Management card

Graduation

Experience

Training

Default training card

Training suggestion

 

Challenge

Challenge site

Intern

Ideas card

Story

Category

Portal service

Courses

Consultant

Training suggestion

Training course

Training event

Training

Single intern

 

Franchise

Single file

SMEs Voice

SMEs voice cards works as an evaluation/rating of a certain service which will appear as from the side after the end of a specific interaction in the page.