StructureLayout

Type definition for container layouts in email structures.

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

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

Type Definition

CreateStructureContentContainer

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

type CreateStructureContentContainer = string;

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

CreateStructureEmptyContainer

An object configuration for non-content containers:

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.

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.

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.

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

Characteristics:

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