---
title: CardSection
description: CardSections are used to group similar concepts within a Card.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection.md#guidelines)

# CardSection

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

CardSections are used to group similar concepts within a Card. CardSections add dividers, which visually separate regions within cards.

##### JavaScript

```ts
import {extend, Card, CardSection} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const card = root.createComponent(Card, {});
  root.appendChild(card);

  const cardSection = root.createComponent(CardSection, {
    title: 'Sectional',
  });
  cardSection.appendChild('This is the best section.');
  card.appendChild(cardSection);

  const cardSection2 = root.createComponent(CardSection, {
    title: 'Loveseat',
  });
  cardSection.appendChild('No, this is the best section.');
  card.appendChild(cardSection2);

  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, Card, CardSection} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Card>
      <CardSection title="Sectional">This is the best section.</CardSection>
      <CardSection title="Loveseat">No, this is the best section.</CardSection>
    </Card>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| title? | `string` | |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use CardSection to split up content within Card | Use CardSection outside of Card |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/cardsection.md#guidelines)