Card (Header, Footer)
Header
Overview
Card headers are used to display the title and optional actions or icons at the top of a card, providing context and controls for the card content. The card header can contain actionable elements like buttons, icons, or status indicators, making it easy for users to interact with the card content quickly.
When to use
Use card headers when you need to provide a quick overview of the card's purpose or subject through a title or icon.
Add card headers when the card requires actions such as editing, sharing, or interacting with specific controls related to the content.
Include a header when you need to display metadata or supplementary information like time, date, or user status at the top of the card.
Use card headers to highlight important context for the card, such as the subject of a report or the name of an event.
When not to use
Avoid using a card header if the card content is simple and does not require additional context or controls at the top.
Do not include a header if the card is primarily visual, like an image gallery, where the focus should be on the content itself.
Do not use headers when the card is small and limited in size, as the header might crowd the layout and reduce readability.
Avoid adding headers if the content is self-explanatory and does not require extra clarification or actions at the top.
Anatomy
Button Leading: The primary action button on the left side of the header, usually for the more important action.
Slot Leading: An optional placeholder for elements such as icons, images, or checkboxes at the start of the header.
Heading Title: The main text in the header that provides the title or subject of the card.
Helper: Additional text that provides context or clarification.
Status Icon: A visual indicator that reflects the current state or status of the card's content.
Slot Trailing: A placeholder for any additional content on the right side of the header.
Button Trailing: The action button on the right side of the header, used for secondary or less frequent actions.
Subtitle: A brief text that expands on the title or offers more information, placed below the heading title.
Size
Small
14
16
14
12
Medium
16
16
18
14
Large
18
20
24
16
xLarge
22
24
24
18
Accessibility
Ensure the title in the card header is clearly readable with appropriate font size and color contrast to meet accessibility standards.
Interactive elements such as buttons or icons in the header should be keyboard accessible and have focus states for users with motor disabilities.
Include accessible text labels for any icons or buttons within the header to ensure they are fully interpretable by screen readers.
Ensure that the header layout is responsive and maintains clarity on smaller screens, adjusting as necessary to prevent content from being hidden or truncated.
The header’s interactive controls should have enough space around them to be easily clickable without interfering with adjacent elements.
Example
Displaying the title of a blog post or article, with a share or bookmark button on the header for easy access to actions.
Showing a user’s name and profile picture in the header of a profile card, with an edit button for quick profile updates.
Using headers in product cards to display product names and star ratings, along with quick links for adding to favorites or comparing items.
Presenting task names in project management cards, with status indicators and action buttons to update or complete the task.
Displaying event details in a calendar card, with a status icon or reminder button at the top for easier scheduling and management.
Footer
Overview
Card footers are used to display actions or additional information at the bottom of a card, providing context and controls for the card content.
When to use
Use card footers to summarize actions related to the content of the card, such as "Learn More" or "Buy Now."
Include a card footer when additional context or metadata (like tags, categories, or dates) is required to support the card content.
Add footers when you want to provide users with clear decision points at the end of a card’s presentation.
Use card footers to separate the main content from call-to-action buttons, making the layout cleaner and easier to navigate.
Provide footers when your card contains multiple pieces of information that require additional segmentation or context at the bottom.
When not to use
Do not use footers if the card content is already concise and does not require further navigation or actions.
Avoid footers when the card is simple enough that adding a footer might overwhelm the user with unnecessary options or clutter.
Do not include a footer if the card design is compact, and space constraints make it hard to maintain readability with the additional footer.
Avoid footers when the content is already action-focused and the user flow is designed to continue through other means, like swiping or scrolling.
Types
Anatomy
Title: The header or label for the footer, summarizing the section or providing context for actions.
Caption: A brief description or supporting text under the title, offering further information or clarification.
Tag: A label used to categorize or highlight the content.
Button Group (Footer Controls): A collection of buttons that allow users to interact with the card or its content.
Paddings
Accessibility
Ensure all buttons or interactive elements in the card footer are keyboard accessible and operable by screen readers, using clear labels or descriptions for assistive technology.
The footer's content, like buttons or tags, should have sufficient color contrast and be large enough to be readable and clickable on both small and large screens.
Make sure that any footers containing icons, tags, or buttons have text labels or tooltips so that they are easy to interpret for users who rely on assistive technology.
Ensure that the footer does not become overcrowded with too many options, making it difficult to navigate and leading to cognitive overload for some users.
The card footer should maintain responsive behavior, adapting to various screen sizes while preserving the layout and clarity of the content.
Example
Displaying purchase or interaction buttons (like "Add to Cart" or "Share") at the bottom of product cards.
Providing related tags or categories at the footer of a blog post card to offer better navigation and filtering options.
Summarizing user-generated content with actions like "Comment," "Like," or "Save" in social media post cards.
Using footers in notification cards to add call-to-action buttons such as "Dismiss" or "Respond."
Showing additional information or secondary actions in the footer of event or news cards, like dates or category tags.
Last updated