---
title: Migrate Card to the Polaris section component
description: >-
  Learn how to migrate the Card component to Polaris web components in customer
  account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/card
  md: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/card.md
---

# Migrate Card to the Polaris section component

The Polaris section component replaces the previous [`Card`](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/structure/card) component and is available as [`<s-section>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section) in API versions 2025-10 and newer.

## Migrating Card to s-section

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section>
      <s-grid
        gridTemplateColumns="1fr auto"
        gap="base"
        alignItems="start"
      >
        <s-stack gap="large-200">
          <s-heading>Addresses</s-heading>
          <s-stack gap="base">
            <s-text color="subdued">Default address</s-text>
            <s-stack gap="small-400">
              <s-text>Kristin Watson</s-text>
              <s-text>1655 Island Pkwy</s-text>
              <s-text>Kamloops BC M7G 672</s-text>
              <s-text>Canada</s-text>
            </s-stack>
          </s-stack>
        </s-stack>
        <s-stack gap="large-200">
          <s-stack direction="inline" alignItems="center" gap="small-100">
            <s-icon type="plus"></s-icon>
            <s-text>Add</s-text>
          </s-stack>
          <s-stack alignItems="end">
            <s-icon type="edit"></s-icon>
          </s-stack>
        </s-stack>
      </s-grid>
    </s-section>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  BlockStack,
  Card,
  Grid,
  Heading,
  Icon,
  InlineLayout,
  Text,
  TextBlock,
  View,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Grid
        columns={['fill', 'auto']}
        spacing="base"
        minInlineSize="fill"
        blockAlignment="start"
      >
        <BlockStack spacing="loose">
          <Heading>Addresses</Heading>
          <BlockStack spacing="base">
            <Text appearance="subdued">Default address</Text>
            <BlockStack spacing="extraTight">
              <TextBlock>Kristin Watson</TextBlock>
              <TextBlock>1655 Island Pkwy</TextBlock>
              <TextBlock>Kamloops BC M7G 672</TextBlock>
              <TextBlock>Canada</TextBlock>
            </BlockStack>
          </BlockStack>
        </BlockStack>
        <BlockStack spacing="loose">
          <InlineLayout blockAlignment="center">
            <Icon source="plus" size="small" appearance="accent" />
            <Text appearance="accent">Add</Text>
          </InlineLayout>
          <View inlineAlignment="end">
            <Icon source="pen" size="small" appearance="accent" />
          </View>
        </BlockStack>
      </Grid>
    </Card>
  );
}
```

***

## Removed properties

### padding

The previous `Card` `padding` prop has been removed. `<s-section>` applies the padding that's appropriate for the context automatically, based on the merchant's branding.

***

## New properties

### heading

`<s-section>` renders its own heading through the [`heading`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section#properties-propertydetail-heading) prop. Heading levels adjust automatically based on nesting depth, so the document outline stays correct for assistive technologies.

## Using the heading prop

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section heading="Addresses">
      <s-text>Kristin Watson</s-text>
    </s-section>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  Card,
  Heading,
  TextBlock,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Heading>Addresses</Heading>
      <TextBlock>Kristin Watson</TextBlock>
    </Card>
  );
}
```

***

## Further guidance

### Recreating bordered visual grouping for nested content

The previous `Card` rendered a visible border and padded surface regardless of where it was placed, including when nested inside another `Card`. `<s-section>` applies its surface styling automatically based on context — in customer accounts, that styling is applied only to top-level sections, and nested `<s-section>` elements render without their own border. If you relied on a nested `Card` to create a bordered visual grouping, recreate it with a layout primitive that exposes `border` and `padding` props, such as [`<s-stack>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack), [`<s-grid>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/grid), or [`<s-box>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/box).

## Recreating a nested bordered group

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-section heading="Order summary">
      <s-stack
        border="base"
        borderRadius="base"
        padding="base"
        gap="small-200"
      >
        <s-heading>Shipping address</s-heading>
        <s-text>1655 Island Pkwy</s-text>
        <s-text>Kamloops BC M7G 672</s-text>
      </s-stack>
    </s-section>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  Card,
  Heading,
  TextBlock,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Card padding>
      <Heading>Order summary</Heading>
      <Card padding>
        <Heading level={3}>Shipping address</Heading>
        <TextBlock>1655 Island Pkwy</TextBlock>
        <TextBlock>Kamloops BC M7G 672</TextBlock>
      </Card>
    </Card>
  );
}
```

***