> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Container Data Types

## Article: Container Data Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/container-data-types.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Container Data Types
Containers allow Wix users to add and arrange inner elements within your component. This is essential for building flexible, compositional components like sections, boxes, cards, or any component that should contain other elements.

> **Note:** Specify these additional configurations under a `container` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="selector"
    type="string"
    required
    description="CSS selector targeting the DOM element that acts as the container. Must match an element in your component template."
  />
  <Property
    name="containerType"
    type="string"
    required
    description="The type of container behavior: simple or template."
  />
  <Property
    name="simple"
    type="SimpleContainer"
    description="Configuration for general-purpose containers where users freely add elements. Use when containerType is simple."
  >
    <ExpandableSection name="SimpleContainer properties">
      <PropertyList>
        <Property
          name="layout"
          type="ContainerLayout"
          description="Controls resize behavior and how child elements are arranged."
        >
          <ExpandableSection name="ContainerLayout properties">
            <PropertyList>
              <Property
                name="resizeDirection"
                type="ResizeDirection"
                required
                description="Which direction the container can resize to."
              >
                <ExpandableSection name="ResizeDirection values">
                  <PropertyList>
                    <Property name="horizontal" description="Container can be resized horizontally." />
                    <Property name="vertical" description="Container can be resized vertically." />
                    <Property name="both" description="Container can be resized in both directions." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="style"
          type="ContainerStyleOverrides"
          description="Customizes which style properties users can edit."
        >
          <ExpandableSection name="ContainerStyleOverrides properties">
            <PropertyList>
              <Property name="border" type="StyleItemOverrides" description="Border style configuration.">
                <ExpandableSection name="StyleItemOverrides properties">
                  <PropertyList>
                    <Property name="disableEditing" type="bool" description="Disables the ability to edit this style item." />
                    <Property name="displayName" type="string" description="Override display name for this style item." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property name="borderRadius" type="StyleItemOverrides" description="Border radius configuration.">
                <ExpandableSection name="StyleItemOverrides properties">
                  <PropertyList>
                    <Property name="disableEditing" type="bool" description="Disables the ability to edit this style item." />
                    <Property name="displayName" type="string" description="Override display name for this style item." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property name="shadow" type="StyleItemOverrides" description="Shadow configuration.">
                <ExpandableSection name="StyleItemOverrides properties">
                  <PropertyList>
                    <Property name="disableEditing" type="bool" description="Disables the ability to edit this style item." />
                    <Property name="displayName" type="string" description="Override display name for this style item." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property name="background" type="StyleItemOverrides" description="Background configuration.">
                <ExpandableSection name="StyleItemOverrides properties">
                  <PropertyList>
                    <Property name="disableEditing" type="bool" description="Disables the ability to edit this style item." />
                    <Property name="displayName" type="string" description="Override display name for this style item." />
                  </PropertyList>
                </ExpandableSection>
              </Property>
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="behaviors"
          type="ContainerBehaviors"
          description="Controls editor interaction with the container."
        >
          <ExpandableSection name="ContainerBehaviors properties">
            <PropertyList>
              <Property name="selectable" type="bool" description="Whether the container should be selectable in the editor." />
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="displayName"
          type="string"
          description="Custom label for this container in the editor."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="template"
    description="Configuration for repeating containers connected with the SDK. Use when containerType is template. Requires SDK integration."
  />
</PropertyList>

> **Note:** All containers require `selector` and `containerType`. Then choose 1 container type configuration based on your `containerType` value.

### Example

A card with constrained styling and vertical resize:

In the manifest:

```typescript
editorElement: {
  data: {
    cardContent: {
      dataType: "container",
      displayName: "Card Content",
      container: {
        selector: '.card-content',
        containerType: "simple",
        simple: {
          displayName: "Card Content",
          layout: {
            resizeDirection: "vertical",
          },
          style: {
            border: {
              disableEditing: true,
            },
            background: {
              displayName: "Card Background",
            },
          },
          behaviors: {
            selectable: true,
          },
        },
      },
    },
  },
}
```

In the component:

```tsx
import type { Container } from '@wix/editor-react-types';

interface CardProps {
  cardContent?: Container;
}

const Card = ({ cardContent }: CardProps) => (
  <div className="card-content">{cardContent}</div>
);
```

## See also

- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Complex Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md)