Install the component dependency:

Include a React component in your project:

Card PropTypes

Name
Value
Description
Default
actionBar
Card.Action[]
top-right action buttons
actionBarVisible
boolean
lock action bar on
false
bonusBar
React element
freeform space in image bottom-left
fullOverlay
Card.FullOverlayLink
hover state for image
fullOverlayVisible
boolean
lock full overlay on
false
image
Required
Card.Image |Card.ImageLink > a > Card.Image
main image or linked image
metadata1
string[] | React element[]
first row of metadata
metadata2
string[] | React element[]
second row of metadata
progress
number
progress 0-100
size
small | medium | large
size of card (from Card.sizes)
medium
tag
Card.Tag
categorization label in top-left
title
Required
Card.TextLink > a > Card.Title | Card.Title
card title or linked title

Card.Action PropTypes

icon
Required
Icon
icon representing action

Card.Image PropTypes

src
Required
string
image url

Card.Tag PropTypes

icon
Icon
tag icon

The card is a flexible component that will fit the container it's given. A gallery is a common container layout that one might encounter in the product. This is an example implementation of how the Card might look in a gallery in your app, using the Layout.EqualColumnLayout component.

While the component is flexible, the size will determine certain base proportions and flexibility min and max bounds.

The image will cover the space given. This space is variable width but set height according to the `size` property.

Progress, if given, should be a number between 0 and 100 that describes the completion level of the content represented on the card.

The title can be a string or a some other element, such as a link, that contains a string

Strings are line-clamped to 2 lines max, then the text will overflow with an ellipsis appended.

Metadata is free-form strings or displayable elements like links. Each bit of metadata is separated by an interpunct.

Metadata is constrained to a single line, overflowing with an ellipsis indicated. The first datum is given display space precendence.

The action bar contains the on-card affordances a user can take besides linking straight to the content. These are usually buttons.

The tag provides a label, usually categorizing the card's content.

A special main action representing the main interaction for the card can be provided here. It will appear overlaid in the center of the image.

Some cards may make use of a freeform area of content overlaid in the bottom-left corner of the image area. Use with dignity.