# Parts (/themes/sdk/reference/elements/parts)

```ts
import { … } from '@poltura/theme-sdk/elements';
```

## `Slot` [#slot]

Draws the children of the current section or block in one region, each through its own component and frame.

```ts
Slot(props: SlotProps): ReactElement | null
```

The default region also draws the statics declared without a slot, where they are stored.

**Props:** [`SlotProps`](/themes/sdk/reference/elements/types-3#slotprops)

**Example**

```tsx
import { Slot, defineSection } from '@poltura/theme-sdk/elements';

export const split = defineSection({
  type: 'split',
  label: 'Split',
  blocks: { accepts: ['heading', 'image'] },
  slots: [{ name: 'media', label: 'Media' }],
  component: ({ attrs }) => (
    <section {...attrs}>
      <Slot name='media' />
      <Slot className='grid gap-4' />
    </section>
  ),
});
```

## `EditableText` [#editabletext]

A plain-text setting of the current element, editable in place on the customizer canvas; nothing when empty.

```ts
EditableText(props: EditableTextProps): ReactElement
```

**Props:** [`EditableTextProps`](/themes/sdk/reference/elements/types-3#editabletextprops)

**Example**

```tsx
import { EditableText } from '@poltura/theme-sdk/elements';

export function Title() {
  return <EditableText setting='heading' as='h2' className='text-3xl font-semibold' />;
}
```

## `EditableRichText` [#editablerichtext]

A rich-text setting of the current element, editable in place on the customizer canvas.

```ts
EditableRichText(props: EditableRichTextProps): ReactElement
```

**Props:** [`EditableRichTextProps`](/themes/sdk/reference/elements/types-4#editablerichtextprops)

**Example**

```tsx
import { EditableRichText } from '@poltura/theme-sdk/elements';

export function Body() {
  return <EditableRichText setting='body' className='flex flex-col gap-3' />;
}
```

## `ElementBackground` [#elementbackground]

The background the merchant styled the current element with: image, video or overlay; nothing when unset.

```ts
ElementBackground(): ReactNode
```

**Example**

```tsx
import { ElementBackground } from '@poltura/theme-sdk/elements';

export function Band({ children }: { children: string }) {
  return (
    <div className='relative'>
      <ElementBackground />
      <p className='relative'>{children}</p>
    </div>
  );
}
```

## `ElementDividers` [#elementdividers]

The shape dividers the merchant set on the current element's edges; nothing when unset.

```ts
ElementDividers(): ReactNode
```

**Example**

```tsx
import { ElementDividers } from '@poltura/theme-sdk/elements';

export function Edges() {
  return <ElementDividers />;
}
```