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.