Default

With subdued background

With varying padding

With responsive border radius

With section

With subdued section

With multiple sections

With multiple titled sections

With subsection

With flushed section

With sections and actions

With sections and critical action

With separate header

With header actions

With header icon actions

With footer actions

With multiple footer actions

With custom footer actions

With critical footer action

With custom React Node title

With all elements

By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-400` (16px) around children.

Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants.

Use the `padding` property to adjust the spacing within a card. You can also specify spacing values at different breakpoints.

Use the `roundedAbove` property to adjust the border radius of the card based on a set breakpoint.

Use when you have a distinct piece of information to communicate to merchants.

Use to indicate when one of the sections in your card contains inactive or disabled content.

Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.

Use when you have two related but distinct pieces of information to communicate to merchants that are complex enough to require a title to introduce them.

Use when your card sections need further categorization.

Use when you need further control over the spacing of your card sections.

Use when your card section has actions that apply only to that section.

Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from.

Use to be able to use custom React elements as header content.

Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address.

Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to export items in a list.

Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information.

Use when there are multiple secondary footer actions that are rendered in an action list popover activated by a disclosure button.

Use to present actionable content that is optional or not the primary purpose of the page.

Use when a card action will delete merchant data or be otherwise difficult to recover from.

Use to render custom content such as icons, links, or buttons in a card section’s header.

Use as a broad example that includes using other layout components to build out the card.

Used to group similar concepts and tasks together for easier scanning and reading.

Card

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Card

Card component examples

Props

Best practices

On this page

Card

Card component examples

Props

Best practices

Related components

On this page