Usage
Cards group similar concepts together which makes scanning content more efficient. Elements within a card are standard and organized so the user can quickly find actionable information. Follow the rule: 'one card, one concept', meaning each card should focus on only one feature or a bit of information.
Cards function as a container for content. They provide a blank canvas to help balance UI aesthetics with good usability. There are various types of content and many options for functionality that can be placed within a card
Cards are an excellent choice for:
- Dashboards or for pages that display a variety of content types at the same time on the same page.
- Displaying data visualizations & metrics
Anatomy
Cards are made up of three main sections: a header, a body, and a footer. Each section has its own options and limitations, and the only section that is preferred is the header.
- Header section (preferred): Defines space for the headline, subheading, and header actions.
- Body section (optional): Displays the content of the card such as lists, images / illustrations, data visualizations, form inputs and more.
- Footer section (optional): Defined space for footer actions.
- Headline (preferred): Briefly describes the features to the user. See the header content guidelines.
- Subheading (optional): Provides supporting content for the header. A subheading should only be used if the user needs more detail to understand the feature within the card.
- Header actions (optional): Typically affect the information within the card such as a 'Add', 'Edit', 'Save'.
- Footer actions (optional): Typically initiate a workflow or take you to the next step.
To remain consistent all cards should use the following basic design specifications.
- container padding
- corner radius
- border weight
- border color
- drop shadow
Click here for card development specs
Layout & structure
The size of a card is determined by the type of content it's hosting. As long as the contents within a card meet our standards of readability, its size does not matter.
- Max width and height of a card follows the content area guidelines.
- For larger cards, follow our line length documentation to make sure lines of text don't get too long.
When data is displayed in a listview within cards, they should follow the same grid pattern to line up with each other. A grid places cards in fixed rows and columns, making it easy for users to scan content. See our grid documentation for more guidance on how to properly space our cards when they're lined up next to each other in a grid. It's important to match height between cards in the same row for visual organization. In a grid, cards should have the same fixed width in each column.
Headlines
Content guidelines
Cards are a great tool for communicating quick stories. Like all stories, the title is important to know if you'd like to read it. Always follow our writing style guide.
Headline alignment
Most of the time cards should use left aligned headlines.
Center aligned headlines are acceptable. Center alignment is typically used on a landing screen before a user enters a workflow, or when the user has a fork in the road choice to make.
- When the headline is centered, the rest of the content in the card should also be centered.
Be consistent. If there are multiple cards on the screen do not mix and match left and center aligned headlines.
Although our cards are designed to allow for wrapping headlines, best practice is to keep the headline short and snappy. Make sure to leave a minimum gutter of at least 50px between the headline and the action button.
Subheading
Use a subheading when you need more supporting copy to reinforce what users will find in the card. Subheadings are part of the header and should directly relate to the headline.
- Limit the subheading to two lines or less when the card is at it's smallest.
- Subheadings can contain links. For example, a common use is a link to learn more.
Actions
In many cases a card offers a entry point to for the user to find more information. Often, a card contains high level information enticing users to click through and discover more. For this reason, it's critical that a card's actions are clear and predictable. There are three ways to make a card actionable: adding an action in the header; adding actions in the footer; or making the entire card the action. A couple things to note when adding actions to your card:
- The type of action should determine placement. For example, actions in the footer typically take the user somewhere else.
Header actions
Header actions typically affect the information within the card such as a Add, Edit, or Save. When using a call-to-action within a card, most often use a secondary button. Primary buttons should be reserved for the most important action a user can take on the page.
Due to the limited space in the header for actions, using an icon button is acceptable; just make sure the icon is easily identifiable. If there is more than one action, consider using a button dropdown; unless both actions are of high importance.
When a card is larger it is acceptable to have multiple actions within the header, just avoid too many call-to-action buttons or links and only one primary call-to-action per card. If there are more than two actions, use a button dropdown.
Footer actions
Footer actions are typically directional, used for kicking off workflows or next step type actions, such as Create a dynamic list.
- When using a call-to-action within a card, most often use a secondary button. Primary buttons should be reserved for the most important action a user can take on the page.
- Depending on the content in the card footer actions can be aligned on the left or centered. For example, if there are form fields in the card, the best practice is to line up the action under the fields on the left side.
Multiple actions in the footer is a limited accepted practice. It is best practice only to have one primary action per card. When there is more than one action, left align them.
Behavior
Clickable cards
In some cases, the entire card should act as a link and initiate a single action. Clickable cards must be expected and predictable so users understand an action can be taken.
- Using actionable wording usually makes it clear you can perform an action.
- When a card contains an actionable component, the interaction should be tied to that UI component, not to the whole card.
- When hovered, the clickable card should outline and the cursor should change to a pointer.
Filtering and sorting
Sometimes it's necessary for the user to be able to filter the data within the card, for example by date. If a card can be filtered, add the proper filtering component to the header action area.
Dragging a card
Dragging and dropping cards is useful when the user needs to rearrange, reorder or group cards.
- Add the grip icon to the header.
- The grip icon area becomes the grab area.
- Change the mouse cursor to a crossbar.
Cards with tabs
In many cases, tabs can take the place of the card headline.
The body of a card should still follow the padding requirements of a card, and the first tab label should line up to that padding.
If a headline is necessary, line up the tabs within the card padding, but keep the separator running to the edges.
Cards with a carousel
When you need multiple pieces of content to occupy a single space, a carousel is a good option. We offer two options to scroll through content, both should always be placed below the carousel.
Loading content into cards
While the data for a card is loading, the card's contents are replaced with a loading spinner. While the card is in a loading state, any actions that could be taken on the card's content are disabled. Cards should not change height drastically when data appears and is rendered.
Skeleton screens and spinners
A skeleton screen is a low-fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element. Using a skeleton screen makes the user perceive that app/website is loading fast. Skeleton screens work great in cards.
Background graphics
Adding background graphics can give the card more visual interest and evoke more emotion to connect with the user. Follow these best practices:
- Bleeding the image to the edge is preferred.
- Illustrations are preferred. See our illustration guidelines.
- Keep in mind scaling to ensure the background graphic is appropriately sized on all card sizes.
Examples of background graphics in cards:
Responsive behavior
When on a mobile device (breakpoint ≤480px) the card's base padding changes to 10px.
Because of the nature of card containers, they are ideal for flexible layouts. As the viewport gets smaller, cards should react appropriately to fit.
- Cards should stack, creating an organized way for users to scroll through the content.
- Left and right margin is removed to maximize room for the card's content.
- Corner radius is removed.
- At least 10px is required between cards.
Header actions
- If the action has an icon that is highly intuitive to the user, for example, pencil icon for edit, it is recommended to use the icon button.
- Limit the header action to one icon button or a button dropdown.
Best practices
Size and layout
Actions
Alternate considerations
- Use a table when there is a lot of data that needs to be organized.