Card List Component

What is a card component?

A card is a design component that groups alike information into a container for readability purposes.

Cards are useful in condensing information that would otherwise be displayed disparately, and present a useful summary of information and details about a given subject.

According to Andrew Coyle of Google, cards have “exploded in popularity” due to the proliferation of online media and mobile apps over the past decade.

Card lists are essentially a hybrid between a card component and a table component, and provide better readability while allowing users to scroll through many records.

Dynamic use of card lists

Employee records can be presented as a card list and even include media like a headshot. An employee records card list displays data pulled directly from an employee database.

Filtered card lists can be used to display cards based on a set of search criteria. For example, a car rental company can display all vehicles that are currently available, have pending service orders, and more.

Using a dynamic filter to bind a card list to a table means that a card list of Available Vehicles can be bound to a table of Dealerships. When a specific Dealership is selected, a card list filters down to the Available Vehicles at that specific dealership.

Card lists in Internal

Card lists are an automatically-generated component in Internal, accessible the moment a data source is connected. Fully customizable, card lists provide a phenomenal way to display and manipulate data from an easy-to-use interface. No coding required, but always allowed.

Check out the card list documentation for more information, including setup and examples.

Resources

Nielsen Normal Group: Cards: UI-Component Definition

MUI: React Cards