What is a Stripe? How to Use Email Sections

1 What is a Stripe?

A Stripe is the top-level section of an email template. It spans the full width of the email and acts as a container for one or more structures (rows). Think of stripes as the major sections of your email: header, hero area, product section, testimonials, footer.

In MiN8T's 4-level hierarchy:

Template
  └── Stripe  ← full-width section (you are here)
        └── Structure  ← column layout row
              └── Container  ← single column
                    └── Block  ← content

Each stripe is an independent section with its own background color, background image, padding, and width. Stripes stack vertically to form the complete email.

2 Stripe Types

Every stripe has a type that defines its semantic role in the email. MiN8T supports four stripe types:

The stripe type affects how the HTML is rendered, each type generates a different CSS class (es-header, es-content, es-footer, es-info) which email clients use for semantic understanding.

3 Adding & Managing Stripes

Adding a New Stripe

You can add stripes in two ways:

• Drag from sidebar, the "Structures" tab includes full stripe presets. Drag one to the canvas between existing stripes.
• Plus button, click the "+" icon that appears between stripes on the canvas to insert a new empty stripe.

Reordering Stripes

Drag a stripe by its handle (on the left edge) to reorder it within the template. The stripe moves with all its structures, containers, and blocks intact.

Duplicating a Stripe

Click the stripe's toolbar menu and select Duplicate. A copy of the entire stripe (including all content) is inserted immediately below the original.

Deleting a Stripe

Click the stripe's toolbar menu and select Delete. The stripe and all its content are removed.

Structures per Stripe

Each stripe can hold up to 4 structures (rows). If you need more rows, add another stripe below.

4 Background Images

Stripes support full-width background images, a common technique for hero banners, promotional sections, and visually rich headers.

Setting a Background Image

1. Click on the stripe to select it.
2. In the property panel, find the Background Image section.
3. Upload an image or enter a URL.
4. Configure position, size, and repeat settings.

Background Properties

• Image URL, the image source (use HTTPS)
• Background color, fallback color shown while the image loads or in clients that block images
• Position, center, top, bottom, left, right
• Size, cover (fill the stripe), contain (fit within), or exact dimensions
• Repeat, no-repeat (most common), repeat-x, repeat-y, repeat

5 Stripe Styling

Select a stripe to configure its appearance in the property panel:

• Background color, the base color behind all structures
• Padding, top, right, bottom, left spacing between the stripe edge and its structures
• Width, the content area width (typically 600px for email compatibility). The stripe itself is full-width, but the content sits within this width centered.
• Border, optional border around the stripe content area

Full-Width vs. Content Width

Stripes are always full-width in the email. The background color and image extend edge-to-edge. But the content (structures, containers, blocks) is centered within the configured width (usually 600px). This creates the classic email layout: full-width colored sections with centered content.

6 Outlook VML Support

Microsoft Outlook (desktop versions 2007–2019 and Microsoft 365) uses the Word rendering engine, which doesn't support CSS background images on table cells. MiN8T automatically generates VML (Vector Markup Language) fallbacks for stripe background images.

When you set a background image on a stripe, the exported HTML includes:

<!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
          style="width:600px;">
    <v:fill type="tile" src="https://cdn.example.com/bg.jpg" color="#1a1a2e"/>
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->

  <!-- Your stripe content here -->

<!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
<![endif]-->

This ensures Outlook users see the background image even though Outlook doesn't support CSS background-image on tables.

7 Next Steps

• What are Structures and Containers?, the next level down in the hierarchy
• What are Modules?, save stripes as reusable modules
• What are Smart Elements?, connect stripes to data sources

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.