Guidelines
When to use
- Content grouping: Use cards to visually group related information, especially when the content is repeated across a page. Cards help users quickly scan and understand content relationships. You can consider using cards in grid-based layouts to create a visually pleasing and organized structure.
- Visual hierarchy: Leverage cards to establish a clear visual hierarchy within your UI. By using cards for more prominent or important content, you guide users to focus on key elements and create a sense of priority.
- Highlight content: Cards are effective for showcasing highlighted content, such as featured items or promotions, without overwhelming the rest of the UI.
When not to use
- Navigation: The card itself should not be used as a clickable element. Use buttons or links inside the card instead.
- General layout grouping: If the goal is purely to organize elements in a structured way without specific UI styling, use a Container instead of a Card.
Use Cards to group related content and actions to visually show that 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.
Cards
- Grouping rich content that includes images, videos, or multiple interactive elements.
- Presenting content with different lengths that must not be truncated.
- Highlighting distinct pieces of information that require separation for better readability.
Lists
- Displaying simple, text-based information with minimal interaction (e.g., a single action per item).
- Organizing in-page navigation menus, ensuring a clear, scannable structure.
- Presenting large sets of uniform data, where a compact layout improves readability and efficiency.
Use List to group simply structured content, such as text and images.
Don't overuse cards to structure simple content.
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.
Corner radius
The corner radius impacts the card's visual prominence and how it blends with surrounding elements. Choose sizes based on hierarchy, nesting elements, and overall design cohesion.
- Small: Use when the card appears overly rounded at smaller sizes or when nested inside another card to maintain a structured look
- Medium: The default size, providing a balanced appearance suitable for most cases.
- Large: Use selectively for a softer, more prominent visual treatment, ensuring it complements the surrounding UI.
Padding
Cards act as containers, and their padding should be adjusted based on their size and context.
- Spacing 100 (8px): Used only with the small corner radius to maintain visual balance.
- Spacing 200 (16px): The default option, offering a well-balanced layout in most cases.
- Spacing 300 (24px) or 400 (32px): Ideal for larger cards that require more white space to enhance readability and proportion. (General rule: the bigger the card, the greater the padding.)
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.
Layout
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 description should be brief and complement the title with more detail. If the description contains longer, detailed text, truncate it if possible, 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 main action should not be placed in the middle of a card's content
The card's title should not use the same/similar font style as the content.
The static image should not be placed at the bottom of the card.
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.
Visual assets
Cards can include a variety of visual 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 visual elements 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 asset on top and make it fill 100% of the card's width.
Don't add padding around the asset, 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 inside a card, we recommend using the following:
- Spacing.
- Dividers.
- Filled card variants with 100% width.
Use cards with subtle or 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 better 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 designs include:
Button variant
When choosing a button variant inside your card, take into account not only the single card 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.
Openable overlay
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. In addition 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 a 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.
Sections composition
Cards can have vertical or horizontal compositions, 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:
- Adjust the width of the content 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 the grouped layout to be adjusted 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