Card

Basic cards typically have a <CardTitle>, <CardBody> and <CardFooter>. You may omit these components as needed, but it is recommended to at least include a <CardBody> to provide details about the card item.

You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.

Most modifiers can be used in combination with each other, except for isCompact and isLarge, since they are contradictory.

You can include header actions with the actions property of <CardHeader> . The following example includes an image using the Brand component, and also includes a kebab dropdown and a checkbox in <CardHeader> actions.

The actions property for <CardHeader> includes the hasNoOffset property, which is false by default. When hasNoOffset is false, a negative margin is applied to help align default-sized card titles with card actions.

You may use hasNoOffset to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.

Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.

Moving <CardTitle> within the <CardHeader> will style it inline with any images or actions.

Card actions can be placed in the card header even without a <CardTitle>.

Images can also be placed in the card header without a <CardTitle>.

You may use the component property to place the card's title within an HTML heading element.

You may use multiple body sections to visually separate blocks of content.

<CardBody> sections will fill the available height of the card when isFilled equals {true}, which is the default value. Set isFilled to {false} to disable this behavior for one or more body sections. The remaining available height of the card will be split between any <CardBody> section that does not set isFilled to {false}.

A common use case of this is to set all but one body section to isFilled={false} so that a primary body section fills the available space of the card as seen in the example below. This example has 3 <CardBody> sections, two of which set isFilled to {false}. The third <CardBody> fills the remaining height of the card.

A selectable card can be selected by clicking anywhere within the card.

You must avoid rendering any other interactive content within the <Card> when it is meant to be selectable only. Refer to our actionable and selectable example if you need a card that is both selectable and has other interactive, actionable content.

When a group of single selectable cards are related, you must pass the same name property to each card's selectableActions property.

An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the isExternalLink property to selectableActions.

You can pass the isClicked property to <Card> to convey that a card is the currently clicked one, such as when clicking a card would open a primary-detail view. This must not be used simply for "selection" of a card, and you should instead use our selectable card or single selectable card.

When a card is meant to be actionable only, you must avoid rendering any other interactive content within the <Card>, similar to selectable cards.

A card can be selectable and have additional interactive content by passing both the isClickable and isSelectable properties to <Card>. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.

When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.

The following example shows a deprecated implementation of selectable cards. This example uses the isSelectable property instead of isSelectableRaised, which is the current recommendation for implementation. isSelectable applies selectable styling, but does not apply raised styling on hover and selection as isSelectableRaised does.

A tabIndex={0} is also manually passed to allow the card to be focused and clicked via keyboard.

Note: the following example uses deprecated properties. We recommend using the new selectableActions property for the CardHeader instead.

The following cards demonstrate how the hasSelectableInput and onSelectableInputChange properties improve accessibility for selectable cards.

The first card sets hasSelectableInput to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, also communicates the current selection state.

By default, this input will have an aria-label that corresponds to the <CardTitle>. If this isn't defined, then you must pass a custom aria-label using the selectableInputAriaLabel property.

The first card passes an onChange callback to onSelectableInputChange to enable the selection/deselection of the associated card via checkbox input.

The second card does not set hasSelectableInput to true, so neither the input nor the selection state is communicated to users of assistive technologies.

We recommend navigating this example using a screen reader to best understand both cards.

A card can be made expandable using the isExpanded property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.

Place any content that you want to be hidden within the <CardExpandableContent> component.

An image can be placed in the card header to show users an icon beside the expansion caret.