Cards group information into flexible containers that allow users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.
Standard cards use a background container to organize information. Quiet cards do not have a container; the components inside float on the background.
Most cards have some type of preview. The preview should appear at the top of the card, but in some cases can be placed in the center or bottom.
Avatars and third party logos are always circular. Adobe product logos should always honor the shape of their logo.
Any type of card can have a hidden actions menu, which is placed on the right side of the header and to the right of the heading.
Card-level actions can either be shown in an action menu or as quick actions. Because quick actions have limited space and only work with desktop experiences, it's recommended to use either an exposed action menu or bulk actions.
Detail text uses the Detail text style. This can appear to the right of the title or below it. Detail text is typically used to show a file type.
Badges can appear in a few different places on a standard style card. If the card has a preview, it should appear anchored to the lower right side, floating on top of the preview. If there is no preview, a badge should go in the footer on the left side. If neither of those options may work for your use case, place the badge anywhere on the card and ensure that the placement is consistent across all cards in your system.
A content area can hold many different components. These areas are built into the body section and the footer of a card. Text or metadata is placed in the body section, and buttons and/or indicators in the footer.
Cards can either be standard or quiet style. Use standard style for a footer with buttons and more information. Quiet style is reserved for very simple cards with little metadata.
Standard cards can be laid out vertically (components are organized in a column) or horizontally (components are organized in a row).
Horizontal cards always have a square preview, and the image is cropped to fit inside the square. These can only be laid out in a tile grid where every card is the same size.
Medium is the default size for a card. Use large cards on webpages where it's necessary to present a lot of content at once.
Small cards are best for small containers such as dialogs, panels, popovers, or trays. These should only have a preview, title, description, badges, and/or action menu. More details should be preserved for a one-up or detail view.
Most cards are selectable. You can either turn on a "selection mode" in which checkboxes will appear in the top left corner of every card, or the checkbox can appear individually upon hover.
In some cases, cards can be draggable. On desktop, the move option should be shown in quick actions and would appear on the furthest right. The checkbox and other quick actions would disappear while dragging.
On mobile, a long press would enable a drag mode that allows for cards to be rearranged.
Card preview areas can have any aspect ratio between 4:1 (shortest) and 3:4 (tallest).
The recommended default preview size is 2:1.
If the height of the card is set (e.g., arranged in a tile grid), title text will truncate if too long. Try to write a short title to avoid truncation.
If the height of the card is variable (e.g., arranged in a vertical masonry grid), title text will wrap to fit the entire title.
Cards, by definition, should have some form of interaction such as viewing, editing, purchasing, etc. Some actions are exposed in buttons, and others simply occur by clicking the card.
If a card only has an ability to be opened or viewed in more detail, do not include a button. Clicking anywhere on the card should perform that action.
If a card has other interactive elements such as a hidden actions menu or an avatar, but no buttons, the whole card (outside of those elements) should be clickable.
If there’s only one action (that’s not opening or viewing the card), use a button to communicate that action. If there are two or more available actions, and one of those actions is to open or view the card, use a button to communicate “View” or “Open,” instead of relying on clicking on the card.
If a standard card has a footer with a button, only the button is clickable. If a card has a preview, clicking the preview will open that card. When a preview is purely decorative, it is not clickable.
When a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading:
There are three types of layout grids to choose from to present cards:
A vertical masonry grid can vary in height, but is consistent in width.
A horizontal masonry grid can vary in width. Rows of cards may vary in height, but the cards within a row are consistent in height. Only quiet style cards are laid out in horizontal masonry grids.
A tile grid is the default layout. They are same height and width as the rest of the cards in the group. Horizontally-oriented cards are always arranged in a tile grid.
Individual cards are not aligned to individual columns in the responsive column grid. Instead, groups of cards are aligned to the column grid in a layout region (a "card grid"). The gutters between the cards should be 3/4 the page gutter width. For example, if a page’s column grid gutters are 32 px, the space between cards should be 24 px.
Cards are laid out in either a fluid card grid or have fixed widths. Most cards can be organized within a grid where the width of each card is fluid depending on the nature of the grid. In rare cases where cards can’t be laid out in a card grid, they’ll have a fixed width that is defined manually.
Card height depends on the grid type and the content of the cards. Cards that are set in a tile grid should all be the same height.
Cards are meant to just show a taste of the available information. Don’t overload cards with more information than necessary.
Only standard cards can have a footer, and buttons can only appear inside a footer. Use a hidden actions menu or quick actions for quiet cards that need to support actions.
Individual cards are not aligned to individual columns in the responsive column grid. Instead, groups of cards are aligned to the column grid in a layout region.
If possible, use either an action menu or quick actions, but not both at once. Keep in mind that quick actions may not be available in touch-first experiences; create cards responsively so that actions can be available in an action menu on mobile.
Specific keyboard interactions will depend on the type of card you are using and what content it contains. Refer to specific card type patterns for more details.
|Tab||Move forward to the next card|
|Arrow keys||Move focus within the card to focusable items within the card. If a button is included on the cards, the button should receive focus first. If there are multiple buttons, the primary or CTA button should receive focus first.|
|Shift + Tab||Move focus backward to the previous card|
|Return or Enter||If the card itself is clickable, return or enter will open the card. If the card is not clickable but has buttons, and the buttons or another item within the card is focused, that action is performed.|
|Space||If the card is selectable, the space bar will toggle selection.|
|Ctrl/Command + Arrow keys||Non-contiguous selection of cards.|
|Sep 16, 2019||1.0.0|