Spectrum
Cards
Cards group information into flexible containers to let users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.
Table of contents#
Components#
Card container#
Standard cards use a background container to organize information. Quiet cards do not have a container; the components inside float on the background.
Preview#
Most cards have some type of preview. This should appear at the top of the card, but in some cases can be placed in the center or bottom.
Avatar or logo#
Avatars and third party logos are always circular. Adobe product logos should always honor the shape of their logo.
Action menu#
Any type of card can have an action menu, which is placed on the right side of the header and to the right of the heading.
Badges#
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 work for a use case, place the badge anywhere on the card and ensure that the placement is consistent across all cards in the system.
Content area#
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.
Footer#
Only standard cards have a footer. The footer has a content area that can hold buttons on the right side and indicators (badges, icons, status lights, etc.) on the left. The footer is always divided from the card body using a small divider.
Options#
Standard or quiet#
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.
Vertical or horizontal #
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.
Size#
Medium is the default size for a card. Use large cards in large views when 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, badge(s), and/or action menu. More details should be reserved for a one-up or detail view.
Selectable#
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.
Draggable#
In some cases, cards can be draggable. On desktop, once a drag mode is enabled, the move option should be shown in the top right corner to indicate that the card can be dragged and rearranged.
On mobile, a long press would enable a drag mode that allows for cards to be rearranged.
Customizable#
The layout of a card will depend on what information needs to be shown. Each part shown in the card anatomy is optional, but should respect the default placement if used.
Behaviors#
Preview aspect ratio#
Card preview areas can have any aspect ratio between 4:1 (shortest) and 3:4 (tallest).
The recommended default preview size is 2:1.
Text overflow#
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.
Clickable cards#
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 (e.g., a hidden action menu or an avatar) but no buttons, the whole card (outside of those elements) should be clickable.
Buttons in cards#
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.
Ghost loading#
When a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading:
- Card group (including metadata) ghost loads.
- If metadata for all cards is loaded before all preview images are loaded, the metadata is displayed for all cards as soon as the last piece of metadata loads. Previews continue to ghost load.
- If all preview images load within the x period (a period of time, usually measured in seconds, that you need to specify depending on the use case), they are shown as soon as the last preview loads.
- If all previews have not finished loading at the end of the x period, the loaded previews are shown, and the pending previews each receive an individual progress circle. The group is no longer in a ghost loading state.
- If the preview load times out, an error is shown along with a mechanism to retry loading.
Layout#
Layout grid#
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. This is the same height and width as the rest of the cards in the group. Horizontally-oriented cards are always arranged in a tile grid.
Card gutters#
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.
Card width#
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#
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.
Usage guidelines#
Keep cards simple#
Cards are meant to just show a taste of the available information. Don’t overload cards with more information than necessary.
Don't add buttons to quiet cards#
Only standard cards can have a footer, and buttons can only appear inside a footer. Use an action bar for quiet cards that need to support actions.
Don't align individual cards to the column 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.
Don’t use quick actions#
Instead of quick actions, use an action bar for both single and bulk selection patterns. An action bar is useful for when a user needs to perform actions on either a single or multiple items at the same time. It can be used on either a grid view or a table view.
Quick actions — a deprecated component — presents conflicting nested actions (for example, a whole asset card could open a detailed view). This makes targeting specific actions very difficult, especially on smaller screens or with the keyboard.
Content standards#
There are a variety of different types of cards, but all card content follows the same general purpose: to set an expectation for what happens when a user interacts with it.
Most cards include at least a title and an action menu, in addition to an image. Buttons and a body section for metadata, or a description, are optional. The language needs to clearly communicate what someone will find at the card’s destination, especially in the title and button.
Titles are short (5-7 words) and focused on the value someone will get from interacting with the card. Metadata is brief (about 10-15 words, but can be more depending on the complexity of the information), complementing the title with more in-depth context. Keep button text at 1-3 words, using a verb phrase to state the action that someone is taking. Titles and action menu content are parallel in structure, straightforward, and use sentence case capitalization.
Use verb phrases in titles and buttons#
Verb phrases more accurately describe what a person will find and do after they interact with a card. This helps to focus the card content on a specific user action, as well as set expectations about the results or a landing destination.
Set expectations on what someone will find and where they will go once they interact with a card.
Don’t speak abstractly or obscure a card’s destination.
Don’t use “new” in card titles#
Avoid using the word “new” in a card unless the design has a limited timeframe, or if there’s a guarantee that the content is actually new and relevant to someone. Avoiding this word also helps to minimize the work required to go back and update card titles when a feature is no longer new.
If you need to display a word to distinguish a card or cards from all others, use the badge component.
Communicate clearly about a card’s destination#
Cards take someone to another experience, so the content should focus on the value a person can find when they get there.
Set clear expectations on what someone will find or start once they interact with a card.
Don’t pose open questions or speak abstractly about what someone will find at a card’s destination.
Be conscious of tone#
Depending on a card’s goal and usage, its tone can range from being motivational to instructive. Some cards, especially those for new users, need to inspire people enough to take action and leave their current experience. Since they direct to useful or inspirational content, a motivational tone would be appropriate.
Other cards, such as for people who’ve been in an experience before and are being shown important but familiar information, should use either a helpful or instructive tone in order to minimize interruption or distraction from a task or workflow.
Keyboard interactions#
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.
| Key | Interaction |
|---|---|
| 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. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Feb 24, 2023 | 3.0.0 |
|
| Apr 06, 2022 | 2.0.0 |
|
| Feb 07, 2022 | 1.0.1 |
|
| Sep 16, 2019 | 1.0.0 |
|
Code