---
url: https://plugin.stripo.email/extensions/reference/types/StructureLayout.md
---
# StructureLayout

Type definition for container layouts in email structures.

```typescript
type StructureLayout = CreateStructureEmptyContainer | CreateStructureContentContainer;
```

## Description

`StructureLayout` is a union type that represents different types of containers that can be used in email structure layouts. It allows for flexible container definitions including content containers, empty placeholders, and spacers.

## Import

```typescript
import { StructureLayout } from '@stripoinc/ui-editor-extensions';
```

## Type Definition

### CreateStructureContentContainer

A string value representing the width percentage of a content container:

```typescript
type CreateStructureContentContainer = string;
```

**Examples:** `'50%'`, `'33%'`, `'100%'`

### CreateStructureEmptyContainer

An object configuration for non-content containers:

```typescript
interface CreateStructureEmptyContainer {
    width: string;
    contentType: 'EMPTY' | 'SPACER';
}
```

## Container Types

### 1. Content Container

**Type:** `string`

Content containers hold actual email content such as text, images, buttons, and other elements.

```typescript
const contentContainer: StructureLayout = '50%';
```

**Characteristics:**

* Defined as a simple string with percentage width
* Receives HTML content during layout operations
* Can be modified and updated with new content
* Typically used for main content areas

### 2. Empty Container

**Type:** `{ width: string, contentType: 'EMPTY' }`

Empty containers are placeholders that reserve space but don't initially contain content.

```typescript
const emptyContainer: StructureLayout = {
    width: '25%',
    contentType: 'EMPTY'
};
```

**Characteristics:**

* Can be converted to content containers later
* Useful for flexible layouts
* Does not receive content during `updateLayoutWithContent()`

### 3. Spacer Container

**Type:** `{ width: string, contentType: 'SPACER' }`

Spacer containers create spacing and margins in layouts.

```typescript
const spacerContainer: StructureLayout = {
    width: '10%',
    contentType: 'SPACER'
};
```

**Characteristics:**

* Never receives content
* Used for margins and gutters
* Helps with responsive spacing
* Maintains layout alignment