Containers

Containers are full-width sections that form the structural backbone of your PDF templates. They stack vertically to create organized document layouts with distinct sections.

What Are Containers?

Unlike other elements that can be freely positioned anywhere on the canvas, containers:

• Stack vertically in document flow (one below another)
• Span the full page width (100%, not horizontally resizable)
• Hold other elements inside (text, images, tables)
• Split across pages naturally when content is long

Think of containers as horizontal bands that divide your document into logical sections.

When to Use Containers

Containers are essential for creating structured, professional documents:

Adding a Container

1. Click Add element in the left panel
2. Select Container
3. A new container appears at the bottom of your template
4. Drag to reorder containers in the Layers panel

Container Properties

Height

The only dimension you can adjust. Drag the bottom edge or set a value in the right panel.

• Default: 200px
• Elements inside are positioned relative to the container’s top-left corner
• Height auto-adjusts during PDF generation based on actual content

Background

Add visual distinction with background colors:

#f5f5f5      Light gray (subtle sections)
#fff3cd      Light yellow (warnings, notices)
#e3f2fd      Light blue (highlighted content)
transparent  No background (default)

Border

Define section boundaries:

1px solid #ddd     Subtle divider
2px solid #333     Strong separator
1px solid #ffc107  Colored accent

Border Radius

Round the corners for a softer look:

0px    Sharp corners (default)
4px    Subtle rounding
8px    Noticeable rounding

Padding

Internal spacing between the container edge and its contents:

• Set uniform padding or individual sides (top, right, bottom, left)
• Keeps content from touching container borders

Margin Top

Vertical spacing between this container and the one above it:

0px    Containers touch (default)
10px   Small gap
20px   Clear separation

Adding Elements to Containers

Elements placed inside containers use absolute positioning relative to the container:

1. Select the container in the Layers panel
2. Add a new element (text, image, or table)
3. The element appears inside the selected container
4. Drag to position it within the container bounds

Elements can be positioned anywhere within the container using pixel coordinates (left, top).

Container Layout Examples

Invoice Header

Container 1 (height: 100px, background: #f0f0f0)
├── Logo image (left: 20px, top: 20px)
├── Company name text (left: 80px, top: 25px)
└── Invoice number text (right-aligned)

Client Information Section

Container 2 (height: 150px, border: 1px solid #ddd)
├── "Bill To" label (left: 0, top: 0)
├── Client name: {{client_name}}
├── Address: {{client_address}}
└── Email: {{client_email}}

Highlighted Notice

Container (height: 80px, background: #fff3cd, border: 1px solid #ffc107)
├── Warning icon
└── Important message text

Page Breaks and Pagination

Containers handle multi-page documents intelligently:

• Short containers: Stay on one page
• Tall containers: Automatically split across pages
• Container order: Preserved across pages

The PDF engine calculates the actual height needed after your data is injected, so containers with dynamic content (like tables with many rows) expand as needed.

Best Practices

1. Use containers for every section - Even simple documents benefit from container organization
2. Set appropriate heights - Leave room for dynamic content to expand
3. Use backgrounds sparingly - Reserve colored backgrounds for sections that need emphasis
4. Consistent margins - Use the same margin-top value between containers for visual rhythm
5. Name your containers - Double-click in the Layers panel to rename (e.g., “Header”, “Line Items”, “Footer”)

Containers vs. Header/Footer

Use Header & Footer for content that should repeat on every page.

Next Steps

• Components - Add text, images, and tables to containers
• Tables - Create dynamic line items
• Styling - Customize container appearance