Guidelines
Use a card to group related content and actions. It visually shows that children elements belong together.
Card vs. List
Both cards and lists are common UI elements, and their usage depends on the specific design goals and content organization needs. When grouping repeatable information, use the following guidelines to decide which component is more suitable for your scenario.
Choose cards when:
- you are grouping a lot of information elements, especially when your content includes images, videos, or other rich media,
- the grouped content includes multiple interactive elements,
- the content has variable length and you don't want to truncate it.
Choose lists when:
- you're dealing with simple, text-based information that doesn't require additional visual elements like images or buttons and is accompanied by a maximum of one interactive element.
- for in-page navigation menus. They provide a clear structure for presenting menu items, making it easy for users to scan and navigate.
Use List to group simply structured content, without interactive elements.
Don't use cards to structure simple content. It creates more visual noise than a list, especially inside another card.
Grouping
A card can be used in solitude when creating a visual hierarchy by highlighting important information or presenting "promotional" content. However, they are usually displayed together in a grid, vertical list, or carousel.
Cards that are grouped together should have similar content structure.
When grouped in a grid, cards in the same row should have the same height.
Cards grouped in lists should have the same height.
Don't mix different content structures when grouping cards together.
Don't mix different content structures when grouping cards together.
Don't allow cards grouped in a list to vary in height. Use text truncation if necessary.
Interaction
Content
Cards do not imply any restrictions on their content structure, as they provide just a styled container with a slot. It is up to the product designer to create them according to the following guidelines.
Hierarchy and structure
- Cards should be easy to scan, so make sure to create a proper information hierarchy.
- Every card should include a short title (5-7 words, 2 lines max.) to set a clear expectation for the card’s topic.
- The card body should be brief and complement the title with more detail. If the body contains longer, detailed text, make sure it is truncated, allowing the user to read it fully when navigating to the detailed view.
- If you include a main action, place it on the bottom/bottom-right of the card.
- If you include a static image or icon for decorative purposes, place it at the top of the card (or on the left side for horizontal layouts).
The static image is placed on the top of the card. The title is distinguishable from the rest of the content, and the main action is placed in the bottom right corner.
The static image should not be placed on the bottom of the card.
The card's title should not use the same/similar font style as the content.
The main action should not be placed in the middle of a card's content.
Building blocks
The card container is the only required element in a card. Card content can vary to support your specific design needs. Below, we've outlined the most frequently used building blocks, but feel free to include others in your card as needed.
Media
Cards can include a variety of media elements such as images, icons, avatars, videos, and maps. They often help to make cards easier to scan and differentiate between each other.
When nesting media inside a card, it is recommended to use it without extra padding around it. Otherwise, it overloads the interface and might increase the user's cognitive load trying to understand which content belongs to which container.
Place the media on top and make it fill 100% of the card's width.
Don't add padding around the media, as it unnecessarily complicates the UI and creates more visual noise on the page.
Cards
Cards can be placed inside of other cards in order to highlight or group information. Be careful, though, as nesting cards can have an overwhelming effect on the UI. For grouping content, we better recommend using the following:
- spacing,
- dividers,
- card content sections set to 100% of the card's width, with highlighted background fill instead.
Use cards with highlighted background fill when placing them inside of an outlined card.
Don't place outlined cards inside of an outlined card. It creates a lot of visual noise and makes the card's hierarchy imbalanced.
When possible, use spacing or dividers to create hierarchy and group information.
Nesting cards can easily create complex UI. Try using other methods like spacing or dividers.
Corner radius hierarchy
To ensure visual balance, always use a smaller corner-radius value for elements nested inside a card than the value applied to the card itself. This will provide a proportional scaling effect.
A nested element must have a smaller corner radius value to maintain the proportional scaling effect.
Nesting two elements with the same corner radius results in an unnatural optical effect.
Interactive components
A card can contain a range of interactive components that allow the user to perform an action, open a deeper level of detail, or navigate to a new page. The most common interactive elements to include in the cards are:
When placing other interactive components inside a card, be cautious not to overcomplicate the content and preserve their usability. It is advised to perform a usability test to ensure the user finds the design intuitive. Examples of those more complex examples include:
Button variant
When choosing a button variant inside your card, take into account not only the single card design, but the overall page design, and make sure there will be just one primary action on the screen.
Use tertiary or ghost button variants when you group cards in a grid or list. This will ensure you won't have too many elements in primary action color on the page.
Don't use the primary (or even secondary) button variant when displaying cards in a grid or list. Make sure there is only one primary action per page.
Overflow menu
Use it to make more actions available without overwhelming the card with too many buttons. It is typically placed in the upper-right corner of a card.
Dividers
Dividers can be used to separate sections in content-heavy cards.
Layering content and images
When placing text or actions on top of the image, you need to pay extra attention to accessibility by ensuring enough contrast between the content and the background. Additionally to using bigger and thicker font styles, you should use one of the recommended solutions:
- When content fills the majority of the card, add an extra layer with opacity that will darken the whole image,
- if you have less content you can add a linear gradient behind it, darkening the area behind the text while keeping the rest of the image brighter,
- alternatively, you can add a background to your content block. Be careful, though, as this solution creates more visual noise.
Extra colored layer added to darken the whole image.
Linear gradient added to darken area behind text only
Background added to text block. This solution creates more visual noise, so use it carefully.
When selecting photos to be layered with content, choose the ones with balanced color contrast. Images with extremely dark and bright areas can make the text difficult to read.
Choose images with an even-out contrast to ensure a good reading experience.
Avoid images with contrasting elements, as it has a negative impact on the reading experience.
Layout
Cards can have vertical or horizontal layouts, which will determine how the main sections (card content components) are positioned against each other.
While selecting a layout orientation for your card content, it is important to know that each card content section is independent and comes with its own layout orientation setup. Therefore you can create a vertically oriented section inside a horizontally oriented card and vice versa.
Responsive behaviour
The card's content should be flexible, and its layout should be adapted to the card's variable width. This flexibility allows cards to scale appropriately without losing their visual appeal or functionality. When designing the card, you can choose between two behaviors that can and should be mixed and matched on different breakpoints:
- Adjusting the content in width while keeping the same layout orientation. This allows components like texts, lists, cards, and images to fill the given vertical space.
- Switching the layout orientation and redistributing the content to fit the new structure. This allows adjusting the grouped layout to the device breakpoint’s ergonomic needs. A horizontally oriented card in a mobile breakpoint may become a larger, vertically oriented card in a bigger breakpoint, lending more space to imagery and typography to fit the larger screen.
Accessibility