Cards

Version 3.0.0

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.

A standard-style card with a preview, title, more actions menu, description, and a button.
DateVersionSpectrumFeb 24, 20233.0.0DownloadApr 06, 20222.0.0DownloadFeb 07, 20221.0.1DownloadSep 16, 20191.0.0Download

Anatomy#

Image illustrating through labels the component parts of a standard-style card, including a preview image, avatar, title, action menu, and empty content areas for metadata, indicators, and other actions. Image illustrating the component parts of a quiet-style card, including its frame, preview, title, and action menu.

Components#

Example of a card’s container, a white background.

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.

Example of an illustration being used as a card preview. A blue, yellow, and seafoam illustration showing abstract geometric shapes and gradients, and two human figures in profile, with a paper airplane being sent from one human to the other.

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.

Three examples of avatars or logos used in cards. A woman’s profile picture, a 3rd-party product logo, and the logo for Adobe Illustrator.

Avatars and third party logos are always circular. Adobe product logos should always honor the shape of their logo.

Example of a card’s action menu. A more menu opens to show 4 options, labels Archive, Duplicate, Share, Edit.

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.

Example of a badge that can appear on a card. A purple color badge, label Scheduled.

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.

Example of a card title, text Share your prototypes.

Title#

Cards use the heading text style for titles. The size can be customized depending on the use case, but by default, use the extra-small heading for medium and large cards and the extra-extra-small heading for small cards.

Example showing a card’s content area, displayed as a blueprint diagram indicating a flexible rectangular space.

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.

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#

Key example of two cards, one in standard style and one in quiet style.

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.

Key example of two cards, one in vertical orientation and one in horizontal orientation.

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.

Key example of two cards, on in large size and one in small 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.

Key example of a card, showing the correct styling for selection.

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.

Key example of a card, showing the correct style for dragging.

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.

Key example showing four different cards with varying levels of detail and different components.

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#

Key example of two cards, first card set at minimum height, second card set at maximum height.

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.

Key example of cards showing truncated titles for tile grid cards, and wrapping titles for masonry grid cards.

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.

Key example of four different kinds of cards, with different layouts that are clickable.

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.

Key example of four cards that are not 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.

Diagram showing the five phases of ghost loading.

Ghost loading#

When a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading:

  1. Card group (including metadata) ghost loads.
  2. 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.
  3. 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.
  4. 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.
  5. If the preview load times out, an error is shown along with a mechanism to retry loading.

Layout#

Key example of cards shown in three different groupings. First card group vertical masonry grid, second card group horizontal masonry grid, third group tile grid.

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.

Key example showing card gutters compared to the page gutter width.

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.

Key example showing a group of cards laid out in a fluid card grid.

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.

Key example of a card showing the standard height for the preview of a card.

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.

do
Key example showing a simple card.
dont
Key example showing a card that is overly complicated.

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.

dont
Key example showing incorrect combining of a quiet-style card and a button.

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.

do
Key example showing correct card group alignment.
dont
Key example showing incorrect card group alignment.

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.

do
Key example of the correct way to surface actions for asset cards by using an action bar. An edit action, copy action, and a more actions affordance, inside an action bar at the bottom of the page, on top of the asset grid. 2 asset cards are selected.
dont
Key example of the incorrect way to surface actions for asset cards. An edit action, copy action, and a more actions, all inside the asset card itself.

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.

do
2 key examples of correct way to write card content, using verb phrases. First example, card title, Give a Premiere Pro video a new background. Card description, Learn how to work with green screen video with these tips for video makers. Button, label Open After Effects. Second example, card title, Sync your work across devices. Card description, Work seamlessly in Photoshop on your iPad and desktop with cloud documents. Button, label Turn on in Preferences.

Set expectations on what someone will find and where they will go once they interact with a card.

dont
2 key examples of incorrect way to write card content. First example, card title, Got a video? Card description, Learn techniques to create popular video effects. Button, label Open in browser. Second example, card title, NEW: Cloud documents. Card description, This feature is in beta, so it might not always work as expected. Button, label Turn it on.

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.

do
Key example of correct way to write a card. Card title, Using Photoshop on iPad? Try cloud documents. Card description, Cloud documents save and sync across devices automatically while you work. Button, label Learn more.
dont
Key example of incorrect way to write a card. Card title, NEW: Cloud documents. Card description, Try this beta feature and tell us what you think. Button, label Turn it on.

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.

do
2 key examples for how to write cards. First example, card title, Invite people to co-edit. 2 buttons, primary button label Open XD, secondary button label Learn more. Second example, card title Make color effects. Card description, Learn how to add duotone color effects to a photo. Button, label Start in-app tutorial.

Set clear expectations on what someone will find or start once they interact with a card.

dont
2 key examples of incorrect way to write cards. First example, card title, What if multiple people could edit a document? Two buttons, primary action label, Try it. Secondary action label, Read about co-editing. Second example, card title, Check this out. Card description, Create duotone color effects in images. Button, label Learn.

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.

do
3 examples of cards using different kinds of tones that are appropriate to the content. First example, Motivational tone. Card title, Create a design that sticks around. Card description, Design a sticker, get it printed, and stick it anywhere. Button, label Make a sticker. Second example, Helpful tone. Card title, Need new inspiration? Card description, Build your design muscle with fresh prompts every day. Button, label Learn more. Third example, Instructive tone. Card title, Brunette girl with sunglasses. Metadata, Adobe Stock photo, Licensed June 14, 2019.
dont
3 examples of cards using inappropriate application of tone in writing. First example, Don’t over index on an instructive tone if the intent is to motivate. Card title, Make a sticker. Card description, Take a tutorial to make your own sticker. Button, label Open file. Second example, Don’t frame card destinations as tasks to be completed. Card title, Start the daily creative challenge. Card description, You’ll submit your assignments every day. Button, label Begin. Third example, Cards that show items or files are utilitarian, and don’t need celebratory language or an inspirational message to engage people. Card title, The photo you were looking for. Card description, A brunette girl with sunglasses will shake up your designs! From the cool folks at Adobe Stock.

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.

KeyInteractionTabMove forward to the next cardArrow keysMove 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 + TabMove focus backward to the previous cardReturn or EnterIf 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.SpaceIf the card is selectable, the space bar will toggle selection.Ctrl/Command + Arrow keysNon-contiguous selection of cards.

Changelog#

DateNumberNotesFeb 24, 20233.0.0
  • Removed quick actions (deprecated) from cards
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Feb 07, 20221.0.1
  • Updated quiet style card previews to align edge-to-edge
Sep 16, 20191.0.0
  • This pattern has been added to the website