Anatomy
- Header: The top section of the card
- Title: Brief, descriptive text indicating the content and purpose of the card.
- Header End: Optional area for card actions
- Content: The main area for information, data, images, or other elements.
Usage Guidelines
Cards should be easy to scan for relevant and actionable information.
Elements like text and images should be placed on cards in a way that clearly indicates hierarchy.
When to use this component
Use to group content and actions on a single topic together.
Use to divide content into clearly defined sections.
When not to use this component
- Don’t use to inform user about important changes or conditions in the interface. Use Banner instead.
Best Practices
Use the Card to display information on a single topic.
Don’t nest cards within cards. Use spacing and dividers to structure layout inside.
Use titles that distinctly represent the intended purpose of the card.
Don’t use more than one primary action on a card
Avoid placing cards inside modal dialogs. Modals are already separate, focused surfaces, so adding a Card inside can lead to cramped layouts and redundant separation.
Do not use the header end slot of the card header for persistent primary actions, use the bottom right of the card instead.
General Component Behaviors
Width
Card always spans full width of it’s parent.
Variants
Raised
Use the Raised variant to present non-editable data or information. Raised cards appear elevated above the background, making them suitable for displaying content that is not in an edit state.
Inset
Use the Inset variant for editable content or when the card is part of a flow that requires content modification (e.g, Adding a new patient). Inset cards appear embedded in the surface, signaling a more interactive or editable area.
Styles
Spacing
None
Removes padding from the content, but keeps Medium padding in the header. Useful when content needs to span edge to edge e.g, Images, Tables or Dividers.
Medium (Default)
Applies Medium padding to the header and content of the card. Useful for most scenarios.
Large
Applies Large padding to the header and content of the card. Useful for promotional sections, landing pages, or rich visuals.
Content Guidelines
- Use titles that distinctly represent the intended purpose of the card.
For further information, see the Content Styleguide.
Known Gaps
- It is not possible to add elements (such as icons or buttons) to the left side of the header title.
- The style and size of the card title cannot be modified. There is no support for larger or custom-styled titles.
- Expand on the behavior documentation
- Provide Accessibility guidelines