Card

v1.0

Cards display a distinct collection of content and actions in a flexible container.

Considerations

Contained

Each card is a standalone object, even within a card group. The actions and information within one card is distinct from others.

Summarized

A card focuses on high-level details to inform users of the card’s purpose and aid in deciding whether to interact with more content.

Interactive

Cards are implicitly interactive by nature whether they have nested buttons or not. They are never static or decorative.

Anatomy

A card component example with various aspects called out using pointers. Number 1 points to the card container. Number 2 points to the media area with an illustration of auto parts. Number 3 points to an over line option that says “Installation”. Number 4 point to the title that says, “Find parts with installation”. Number 5 points to a Subtitle that says “Let AI do the work for you when it comes to finding the right parts and installation.” Number 6 points to a CTA button that is labeled “Try it now”.

Container
Media
Overline
Title
Body
Actions

Properties

Container

The card container bounds all of the card’s content and manages its state. It can flex according to the amount of content inside the card and the space available in the surrounding UI.

The card container is the only required element of a card. However, follow the standard placement of preview images, content areas, and actions.

Style

Cards are available as either filled or outlined. Choose a style that fits best in the page hierarchy. Outlined cards are generally more pronounced while filled cards are subtler.

Filled cards use a light gray background to denote the card’s boundary. They generally work best on primary page backgrounds and in more relaxed page layouts.

Outlined cards have a distinct border and white background. They generally work across various page backgrounds and in denser page layouts.

Two cards, both in a vertical layout with an image of two people playing basketball followed by “Title”, “Subtitle”, and a primary CTA button labeled “Label”. The first card has a light grey background. The second card has a light grey border.

Orientation

Card contents can be oriented vertically or horizontally.

For vertical cards, the preview image, content area, and footer all flex to fill the available space. The preview media can be square, 16:9, or 5:4. The default ratio is 5:4.

For horizontal cards, the content area flexes to fill the available space, while the preview image maintains a fixed square ratio.

2 card examples. The first card is in a vertical layout with the media area on top followed by the title, subtitle and lastly the footer action. The Second card is in a horizontal layout with the image on the left and the content area to the right, the content area is stacked top down with the title, subtile and footer.

Common elements

Preview image

Cards can have a preview image to enhance the visual impact of the card. Previews are aligned at the top of vertical cards and can be square, 16:9, or 5:4. The default ratio is 5:4

Preview images in horizontal cards are square and aligned to the leading edge of the card.

2 card layouts, the first is vertical and the second is horizontal. The card has a promotional image and below the image, text reads: 'Collect like a pro. View and manage your entire portfolio, list at lightning speed, and add to your collection with ease.' The same image and text appear again in a smaller, horizontally-aligned layout.

Content area

The card content area contains the primary details and purpose of the card. This includes a title, subtitle, description, or overline. The content area can also include leading and trailing accessories, like avatars and buttons.

A vertical card with a light grey background. The content includes a photo of runners, an overline with a sneaker icon labeled “Sneakers”, a title labeled “Runners essentials”, body copy, and a secondary CTA labeled “Shop now”.

Footer

Cards can have a footer that holds buttons and other metadata related to the card content.

Two vertical cards, both in a vertical layout with an image of three people on a green background followed by a title labeled “Fuel your fashion inspiration”, and body copy. The first card has a primary CTA labeled “Explore now”. The second card have an icon button on the right side with a right pointing arrow.

Behavior

Interactivity

Cards are directly interactive or not. The entire card is interactive if no additional buttons are present. Otherwise, only the nested buttons are interactive.

Two vertical cards, both in a vertical layout with an image of four people holding bags followed by a title labeled “Luxury bags”, and body copy. The first has a blue outline signaling the entire card is clickable. The second has a secondary CTA with a blue outline.

States

Directly interactive cards use a state layer to indicate hovered, pressed, and focused states.

Video description: An animation that shows the various states of the card component. The first state is hovered and selected, where the CTA button receives a hover state layer, and the image contained within scales up. When selected, the CTA button updates to the pressed state layer and scales down, resetting on release. The second state is focus, where a selection line surrounding the CTA button animates on when the user keyboard tabs onto the component. The third state is disabled, where the card switches to the disabled state, turning greyscale.

Content overflow

Cards with fixed heights will truncate the description at 3 lines and the title at 1 line by default. This is common in uniform grid or carousel layouts.

Cards with a flexible height will wrap titles and descriptions to fit all characters by default. This is common in masonry or mosaic layouts.

A phone screen titled “Selling” with a vertical card with a light grey background. The card has a photo of two people taking a photo of a jacket, a title labeled “How to take great photos”, body copy, and a primary CTA button labeled “See photo guide”. Below is a section labeled “Drafts (3)” with two images.

Width

Vertical cards have a minimum width of 200px and a maximum width of 400px.

Horizontal cards have a min width of 300px and max with of 800px.

Two horizontal cards with specs. The first is small with a label of 300 width. The second is large with a label of 800 width.

Responsiveness

To allow for a more readable experience on smaller screens, an inline card will shift to a stacked layout on screens below 360px wide.

Screen size

Small screens

Cards on small screens can be standalone and extend the width of the grid. Cards within a carousel include one visible card and a peek of the second card.

A phone screen with body copy, tabs labeled “Store”, “About”, and “Feedback”, a section labeled “Guides & articles”, and two cards with one view cut off in a carousel.

Medium & large screens

Cards fill their container up to their maximum width. Cards in a grid will expand in width between their minimum and maximum width, wrapping to a new row as space allows.