--- title: Card description: >- The Card component groups related content and functionality together in a familiar and consistent style. Use Card to create contained surfaces for customers to scan, read, and interact with, such as address blocks, order summaries, or account details. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Card The Card component groups related content and functionality together in a familiar and consistent style. Use Card to create contained surfaces for customers to scan, read, and interact with, such as address blocks, order summaries, or account details. Card provides consistent padding and borders to visually separate content groups. For vertically stacking content inside a card, use [BlockStack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack). For structured page-level grouping with headings and actions, use the [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page) component. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Address management**: Display saved addresses with edit actions in a self-contained card. * **Order summaries**: Group order line items, totals, and actions in a clearly bounded area. * **Subscription details**: Show subscription plan information, renewal dates, and management actions together. * **Account information**: Present profile details like name, email, and phone number in a scannable card. *** ## Properties Configure the following properties on the Card component. * **padding** **boolean** Whether to apply default padding to all edges of the card. * `true`: Applies context-appropriate padding. * `false` (or omitted): No padding is applied. *** ## Examples ### Display an address card Use Card to group related content like an address block with an edit action. The card provides a consistent visual container. ## Display an address card ![A card showing an address section with a heading, address details, and an edit icon.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/card-preview-EDxnZVoE.png) ## Display an address card ##### React ```tsx import { Card, Grid, BlockStack, Heading, Text, TextBlock, View, Icon, InlineLayout, reactExtension, } from '@shopify/ui-extensions-react/customer-account'; import React from 'react'; export default reactExtension( 'customer-account.page.render', () => , ); function App() { return ( Addresses Default address Kristin Watson 1655 Island Pkwy Kamloops BC M7G 672 Canada Add ); } ``` ##### JS ```js import { Card, Grid, extension, } from '@shopify/ui-extensions/customer-account'; export default extension( 'customer-account.page.render', (root, api) => { renderApp(root, api); }, ) function renderApp(root, api) { const card = root.createComponent( Card, {padding: true}, [ root.createComponent(Grid, {columns: ['1fr', 'auto'], spacing: "base", minInlineSize: "fill", blockAlignment: "start"}, [ root.createComponent('BlockStack', {spacing: 'loose'}, [ root.createComponent('Heading', undefined, 'Addresses'), root.createComponent('BlockStack', {spacing: 'base'}, [ root.createComponent('Text', {appearance: "subdued"}, 'Default address'), root.createComponent('BlockStack', {spacing: 'extraTight'}, [ root.createComponent('TextBlock',{}, 'Kristin Watson'), root.createComponent('TextBlock', {}, '1655 Island Pkwy'), root.createComponent('TextBlock', {}, 'Kamloops BC M7G 672'), root.createComponent('TextBlock', {}, 'Canada'), ]), ]), ]), root.createComponent('BlockStack', {spacing: 'loose'}, [ root.createComponent('InlineLayout', {blockAlignment: "center"}, [ root.createComponent('Icon', {source: "plus", size: "small", appearance: "accent"}), root.createComponent('Text', {appearance: "accent"}, 'Add'), ]), root.createComponent('View', {inlineAlignment: "end"}, [ root.createComponent('Icon', {source: "pen", size: "small", appearance: "accent"}), ]), ]), ]), ]) root.append(card); } ``` *** ## Best practices * **Group related information**: Only include content in a card that belongs together conceptually. Mixing unrelated content makes the card harder to scan. * **Use headings that set clear expectations**: Add a heading inside the card that describes its purpose so customers know what to expect. * **Prioritize important information**: Display the most critical information first so customers can get what they need at a glance. * **Keep cards focused**: Limit the amount of content in a single card. If a card grows too large, consider splitting it into multiple cards or sections. *** ## Limitations * Card provides only the outer container with padding. Internal layout must be handled with components like [BlockStack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack) or [InlineLayout](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinelayout). * Card doesn't support custom background colors or border styles. Styling is limited to the predefined design. * Card doesn't include built-in heading or action slots. Structure the card content manually using text and button components. ***