Cards and data display

Cards and data display components generally display text content and help to organize information on a screen.

Action Card

Action Cards display limited information about an object in the system (e.g. user, process), including an optional count of how many instances of that object exist. This card also allows users to take an action on the object without going to another screen (e.g. deleting or duplicating an instance of an object).

Formatted Content

Formatted Content displays read-only information as plain text, formatted text, or a user avatar. Formatted Content is used to display a wide range of read-only content, from static links to related content to user avatars that link to full user profiles.

iFrame

IFrame displays embedded content from a specified external source (e.g. Google Maps) in a screen.

Information List

Information List provides a list of read-only data from the system that users can scan quickly, such as might be used to display a list of users and their contact information.

List View

List View provides a list of objects in the system (e.g. filming locations) that users can quickly browse through and take action on.

Number Card

Number Cards display a quantity of objects in the system (e.g. number of views of a trailer), retrieved from a query.

Screen Breadcrumb

Screen Breadcrumb displays a list (or breadcrumb trail) of one or more sequential screens. It acts a secondary navigational aid to orient users where they are in an experience task.

Summary Card

Summary Cards display a summary of specific data in the system and can expand to show additional information.

Summary Card Carousel

The Summary Card Carousel is a row of Summary Cards that scroll horizontally to display more cards while taking up less space on the screen. All of the cards in the carousel display information from the same query.

Table View

Table View provides a table that displays one object in the system per row, automatically paginating if the number of objects exceeds available space. All of the table rows display objects from the same query, and each row is expandable to display more information. Users can search the objects in the table and take actions on these objects.

Text Card

Text Cards display only static text that is not connected to an object in the system (i.e. it does not react to object changes). The Text Card can be used anywhere static content is required, such as providing basic informational content.