Card

This is the legacy version of the Card component which is in the process of being updated to a more flexible and composable API. Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.

Props

Some types of props are following the Polaris Design Tokens.

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

Best practices

Cards should:

• Group related information
• Display information in a way that prioritizes what the merchant needs to know most first
• Use headings that set clear expectations about the card’s purpose
• Stick to single user flows or break more complicated flows into multiple sections
• Avoid too many call-to-action buttons or links and only one primary call to action per card
• Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional actions (such as Edit)

---

Related components

• For more flexibility on styling, use the Box component