Anatomy
- Tagline (optional): Text that identifies a set of content; optionally, it can include an icon
- Metadata (optional): Highlighted value, badge, or text that identifies related data for the card
- Actions (optional): Actionable elements that can be displayed as iconic buttons or dropdown triggers
- Heading label: Title of the card; optionally, it can include an identifier
- Caption (optional): Text that displays secondary information
Subcomponents
See usage guidance for iconic button
See usage guidance for dropdown
See usage guidance for highlighted value
Usage
Use card base header to provide metadata, actions, or menu options in a card component. The card header identifies the content of the card and provides actionable elements, such as iconic buttons and dropdowns.
Variants
Tagline and heading in card header have their own variants.
Tagline
The tagline has the following variants: secondary and tertiary.
Secondary
Use a secondary tagline to emphasize the tagline context and to indicate that the card is interactive. The tagline shouldn't be your primary way to indicate interactivity, so use this variant sparingly.
In this example, the “change request” secondary tagline indicates to the user that the card is interactive and will navigate them to the change request.
Tertiary
Use a tertiary tagline to provide context to the card's content. Tertiary is the default variant for tagline.
In this example, the tertiary tagline specifies the chat number and provides context to the content.
Heading
The heading has the following variants: primary, secondary, and tertiary. When choosing a variant, consider the surrounding components to build hierarchy within your design.
Primary
Use a primary heading to increase the card's visibility so that the user can quickly scan the information. The primary variant is the default variant for the heading.
Secondary
Use the secondary heading when you want the user to focus on other objects as the context.
In this example, the secondary variant heading keeps the text from visually competing with the image.
Tertiary
Use a tertiary heading when the text isn't essential for the user to understand the card's content. You can also use this variant when you don't want the heading to compete with other elements in the card.
Sizes
Identifier, heading, and caption all have their own sizes.
Identifier
When choosing an identifier, make sure its size is proportional to the heading. Here are some recommendations for how to use different identifier sizes with the heading label.
Icon
In this example, a large icon is paired with the heading.
In this example, an extra-large icon is paired with a two-line header to fill the height of the two lines.
Image
In this example, the medium size image complements the heading label and caption.
Heading
Headings are available in three different sizes: small (sm), medium (md), and large (lg). Use a combination of sizes and variants to establish hierarchy for your card's content. When choosing a size, consider the size of the card and how much emphasis you want to put on the heading.
Small
Use the small size heading to match the card font size. Small is the default size for headings.
Medium
Use the medium size heading to match similarly-sized elements in a card. You can also use this size so that the label is proportionate to the size of the overall card.
In this example, the medium size heading distinguishes the category from the content.
Large
Use the large size heading to match similarly-sized elements in a card.
In this example, the large size heading complements the large thumbnail image.
Caption
The caption provides secondary information to the heading, so use a size that reflects this relationship.
Small
Small is the default size for the caption.
Medium
Use the medium size caption to complement larger heading sizes.
Configurations
You can use different elements within card header to convey information or provide actions.
Tagline
Use a tagline to categorize different types of content. Avoid using a tagline if the cards in the display are from the same category. Additionally, avoid using a tagline if the type of content in the card is clear. You can configure the tagline to include an optional icon.
In this example, “Article” and “Attachment” are taglines that visually categorize the cards.
Heading Identifier
The heading identifier is a visual element that supplements the heading label. It also creates a visual distinction between cards. When adding an identifier, make sure it matches the same style as the heading label and uses a complementary size.
Icon
You can use an icon as an identifier. Use either a large or extra-large icon for a heading identifier.
A larger icon helps the user scan the card quickly.
Avatar
You can use an avatar as an identifier. Avatars are a visual way to associate a person with a card.
Image
You can use an image as an identifier.
In this example, the heading identifier is a custom image.
Heading
The heading is text that summarizes the card. It is available in different sizes and variants for your use case. You can configure the heading label to be a maximum of two lines. After two lines, the text truncates with an ellipsis.
Caption
The caption is text that serves as a subheading and provides additional context to the heading. You can configure the caption to be one or two lines of text, depending on your use case. If you want to display more text (like a short description), place the text within the content slot instead of the caption.
Actions
Actions are icons that function as either buttons or dropdowns. You can add these to the heading area of card header to help the user interact with the card component. If you include a tagline, the actions will appear in line with the tagline. But if there isn't a tagline, the actions will appear in line with the heading. The style and spacing for these actions depend on their placement.
A card summarizes the most essential information a user needs to make a decision. Consider this when deciding which actions to include. You want to provide actions that improve the user's workflow and don't impede it.
Iconic buttons
Dropdown
For dropdown actions, use an icon that represents the grouping of actions. If the dropdown appears alongside other iconic buttons, it will appear farthest to the right. For more information on configurations for the dropdown component, see usage guidance for dropdown.
In this example, the dropdown displays as a share icon in the card header. The actions nested within the dropdown are different ways the user can share the card's content.
Metadata
Metadata can be a badge, highlighted value, or string of text. It displays to the right of card header. If you display it alongside a set of actions or dropdowns, it appears to the left of the actions. Carefully consider how much metadata you want to include in card header, as too much content may overwhelm the user.
Badge
Use a badge to display a number related to the card heading.
Highlighted value
Use a highlighted value to add a status or category to a card.
String
Use a string to display text metadata (like date). Keep these strings short so that users can easily scan the card heading's text. Be aware that the string element has predefined font styles that you can't override or customize.
Design recommendations
Use the same number of heading lines for all cards in your design. This creates a consistent pattern for the user. By using the same number of lines, you can also use the same identifier size for all cards.
Avoid mixing single- and two-line headings for cards in the same display.
Alignment and positioning
The identifier is top aligned for headings that span two lines. If the labels for your cards vary in length, don't use an identifier because the alignment will be inconsistent.
UI text guidelines
These are some recommendations for using text within card header:
- Consider using a similar format for headers in groups of cards to make scanning them easier
- For example, a group of cards for setting up a product could be “Install a plugin,” “Add users,” and “Set permissions”
- Longer headers may get shortened depending on the available space, so put the most important information first
Behavior
Learn how card header behaves when the display changes or a user interacts with the component.
Responsive behaviors
Learn how card header responds to changes in a container or display
Overflow
You can display a maximum of three iconic buttons for actions in card header. When you add more than three buttons, all actions display in an overflow menu.
In this example, all four actions display in the overflow menu.
Interactions
The actions within the card header are the only interactive elements within the subcomponent.
Truncation
The width of the card determines when the heading or caption truncates. To avoid truncation for longer strings of text, use two lines for the heading label or caption. However, the heading label and caption have a maximum of two lines. If the text exceeds this two-line limit, it truncates with an ellipsis and displays the full text in a tooltip.
Usability
Card header complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the card header labels and values align on the right.
Accessibility
Learn how to access the actionable elements of card header through keyboard interactions and screen readers.
Keyboard interactions
Note: An option in the user Preferences menu on the OS sets a tab stop on non-interactive text that truncates in this component, such as a title or label, and makes that text a tooltip trigger. The user presses Enter or the spacebar to open the tooltip and view the entire content. To enable this feature, set the Enable keyboard focus on truncated text option to true in the Accessibility panel of the Preferences menu.
- Tab: Shifts focus to the card or action (when available)
Screen readers
The card header subcomponent inherits the standard ARIA behaviors from the dropdown and iconic button components and have the ARIA role of button. Additionally, be sure to use a label that best describes the action the button performs. Also remember to use the appropriate heading tag for the heading element in the card by considering the card's hierarchy in display.