Card
A card is a visual container that organizes and groups information and/or actions related to a single concept.
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Usage
Do
- Keep the content of a card related to a single concept
- Keep content inside cards aligned, even in cases where dividers extend to the edge of the card
- Avoid scrolling inside cards; rely on scrolling of the parent container instead
- Avoid placing a card on a background lighter than $neutral-2
Don’t
- Place cards within cards
- Include many calls to action within a single card
- Use card to replace similar components, such as dialog
Anatomy
Although a card’s layout can vary depending on the content it holds, there are some elements that are consistent across most cards.
- (1) Simple card
- (2) Content area
- (3) Card header area: Optional part that holds card title and card actions. For tables inside cards that require batch operations, this area is mandatory.
- (4) Card title: Describes the scope of the card. It may include icons, along with custom components like inline subtitles, pills, etc.
- (5) Card actions: Placed in the card header area. May include buttons, icon buttons, and other components that fit the 32px tall area.
- (6) Card footer area: An optional area that may include call-to-actions and other components.
Spacing and style
- Cards have a default padding of 20px on desktop
- Header and footer areas may use 16px vertical padding instead
- The card container uses $depth-8 for shadow and a border radius of 4px
- The vertical distance between cards should be 16px
- The most common distance between cards horizontally is 16px, but it depends on the column layout
Related
APIs
ICardProps
classNameInherited From: ICustomCardProps
string
An optional className to pass to the card container element
collapsedfalse
boolean | ObservableValue<boolean>
Set to true to collapse the card, hiding the contents.
collapsiblefalse
boolean
Set to true to be able to collapse the Card's contents with a button.
headerBreakpoints
Card header can be defined with a set of breakpoints. These breakpoints will be used to control
the visibility of the Command Bar items as the space available to Card header changes.
headerClassName
string
An optional className to pass to the card's header. If there is
a table after the header, then "no-v-padding" should be passed here
in order to remove the bottom padding that the header renders by default.
headerCommandBarItems
IObservableArray<IHeaderCommandBarItem> | IHeaderCommandBarItem[]
Optional commands to render in the Card's header
headerDescriptionProps
Props to forward to the description of the Card's Header
onCollapseClick
(event: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void
Callback for when the collapse button is clicked.
renderHeader
() => JSX.Element
Optional function to render a custom header.
ICardContentProps
className
string
An optional className to pass to the card content
contentPaddingtrue
boolean
Indicates the consumer does not want any horizontal padding.
ICardFooterProps
className
string
An optional className to pass to the card footer
ICardHeaderDescriptionProps
className
string
An optional className to pass to the card header's description
text
React.ReactNode
Optional description to display for the card
ICardTitleProps
ariaLevel
number
An optional aria level to the title
className
string
An optional className to pass to the title
id
string
Optional id to pass to the card title
text
string
Optional title to display for the card
ICustomCardProps
className
string
An optional className to pass to the card container element