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.

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#

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
Options#
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#
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


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
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
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




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
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.
Changelog#
- Removed quick actions (deprecated) from cards
- Updated all colors to 6.0.0
- Updated quiet style card previews to align edge-to-edge
- This pattern has been added to the website