Card

An option in a group of selectable items with a select element or call-to-action.

Stable

Show details

Cards let users select an option in a group of options. The larger, visual format (compared to Radio or Checkbox) increases the importance of the options and makes them easier to scan and digest.

The Card component is available in single-select, multi-select, and action variants. The single-select and multi-select variants are also available in a compact format.

An optional “Custom elements” section lets you display an icon, and either a Badge or a Tag, at the top of the Card. In the single-select and multi-select variants, only one custom element can be applied because of the radio/checkbox controls.

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Icon	32 × 32px icon. A decorative visual to catch user attention and reinforce the content’s meaning.	Yes
2. Radio	Radio element (from Radio Group) that allows users to select one option out of several, mutually exclusive options.	No (for single-select Card)
3. Title	Concise summary in a few words to understand the option at a glance.	No
4. Description	Extra information about the option, to offer more guidance in making an informed decision.	Yes
5. Container	Container for the Card’s content.	No
6. Badge	Badge element to highlight an option’s status.	Yes
7. Checkbox	Checkbox element that allows users to select multiple options out of several options.	No (for multi-select Card)
8. Tag	Tag element to highlight a user-generated label associated with an option.	Yes
9. Subtitle	A short piece of information to support the title, e.g., “By Octopus Deploy” indicates that a Process Step was made by Octopus Deploy.	Yes
10. Actions	Primary and optional secondary action as a Button and/or Link.	No (for action Card)

Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

Card

Property	Values	Default
type Variant	single-select \| multi-select \| action	single-select
state Variant	rest \| hover \| focus	rest
↳ hasIcon Boolean	true \| false	true
hasSecondaryAction Boolean	true \| false	true
hasLink Variant	false \| true	false
hasCustomElements Boolean	true \| false	true
↳ hasBadge Boolean	true \| false	undefined
↳ hasTag Boolean	true \| false	undefined
✏️ title Text	string	A short and sweet title
↳ ✏️ description Text	string	Keep it concise with maximum two short sentences. Description truncates if more than 4 lines.
hasDescription Boolean	true \| false	true
✏️ subtitle Text	string	By Octopus Deploy
↳ hasSubtitle Boolean	true \| false	true
icon InstanceSwap	icon	package
isCompact Variant	false \| true	false
isDisabled Variant	true \| false	false
isSelected Variant	true \| false	false

Card

type multi-select state rest hasLink false isCompact false isDisabled false isSelected false

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact false isDisabled false isSelected true

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact true isDisabled false isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state focus hasLink false isCompact false isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type action state rest hasLink true isCompact false isDisabled false isSelected false

Lets the user navigate to a new page using a link. Because it has an action, the card itself is not clickable. Includes a subtitle.

Card

type multi-select state rest hasLink false isCompact true isDisabled true isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact true isDisabled true isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact false isDisabled false isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type action state rest hasLink false isCompact false isDisabled false isSelected false

Lets the user navigate to a new page using a primary or secondary action. Because it has actions, the card itself is not clickable. Includes a subtitle.

Card

type action state rest hasLink false isCompact false isDisabled true isSelected false

Lets the user navigate to a new page using a primary or secondary action. Because it has actions, the card itself is not clickable. Includes a subtitle.

Card

type multi-select state focus hasLink false isCompact false isDisabled false isSelected false

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type multi-select state focus hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type multi-select state hover hasLink false isCompact false isDisabled false isSelected false

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type multi-select state hover hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact false isDisabled true isSelected false

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact true isDisabled true isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact true isDisabled false isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state focus hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state hover hasLink false isCompact false isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state hover hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact false isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact false isDisabled true isSelected true

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact true isDisabled true isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type single-select state rest hasLink false isCompact false isDisabled true isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact false isDisabled true isSelected true

Lets the user choose multiple options from a list of choices. The whole card is selectable.

Card

type multi-select state rest hasLink false isCompact true isDisabled false isSelected false

Lets the user choose one option from a list of mutually exclusive choices. The whole card is selectable.

Behavior

Cards scale relative to their container using responsive behavior. As the browser responds, Cards will scale and eventually stack.

Width

There are slight variances in min-width and max-width in Figma vs code. This is due to the nature of the CardGroup container, where each Card’s width recalculates based on the number of columns in the grid.

If a Card is used outside of CardGroup, we recommend using min-width: 256px and max-width: 600px.

Height

By default, a Card’s height is determined by its content. All cards have the same height, matched to the tallest card in the row.

Gap

The vertical and horizontal gap between cards should always be space.16.

Actions

When an action Card scales, its actions can scale to full-width. If a secondary action exists, it will stack below the primary action.

Component dependencies

This component is internally dependent on the following components:

System Icons

Badge

Badges highlight the status of a corresponding object

Tag

Used to categorize, classify or filter corresponding object, or to communicate user-generated labeling.

Button

Buttons allow users to take actions that will trigger a response.

Help and support

Ask a question or submit a request

Find us in #team-frontend-foundations-requests Slack channel

Card

Anatomy

Variants

Behavior

Width

Height

Gap

Actions

Component dependencies

Help and support

Design Resources

Engineering Resources

Slack Channels