---
title: "Content blocks"
description: "Headers, images, text, buttons and footers — the static building blocks that look the same in both the AMP and fallback versions."
url: https://help.ampemail.com/en/articles/5-content-blocks
collection: "Building emails"
updated: 2026-09-08
language: en
---

# Content blocks

Headers, images, text, buttons and footers — the static building blocks that look the same in both the AMP and fallback versions.

_Applies to: the Block, Header, Image, Text, CTA and Footer categories in the builder_

These are the static parts of your email — the layout and content that looks the same in both the AMP and fallback versions. For the parts recipients can interact with, see [AMP interactive components](https://help.ampemail.com/en/articles/6-amp-interactive-components.md).

## Header

Four header layouts, all built around your logo:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Block</p></th><th colspan="1" rowspan="1"><p>Contents</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Logo</strong></p></td><td colspan="1" rowspan="1"><p>Logo alone</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Logo with Text</strong></p></td><td colspan="1" rowspan="1"><p>Logo plus a line of text</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Logo with Slogan</strong></p></td><td colspan="1" rowspan="1"><p>Logo plus a tagline</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Logo with social links</strong></p></td><td colspan="1" rowspan="1"><p>Logo plus social media icons</p></td></tr></tbody></table>

Upload your logo once and set its link (usually your homepage). Social icons each take their own URL.

## Block

General-purpose layouts that combine an image and text:

-   **Image & Text** — an image beside a heading, paragraph and button. The standard hero.
    
-   **2 Columns** — two variants, for side-by-side content.
    
-   **3 Columns** — three items across, typically products or features.
    
-   **4 Columns** — four items across, best kept to short labels on mobile.
    

## Image

For image-led sections:

-   **1 Column**, **2 Columns**, **3 Columns** — image grids.
    
-   **2 Columns with Background image** — text over a background image.
    
-   **1 Column with background image** — a full-width background band.
    

Each image takes a source, alt text and an optional click-through URL, and can be cropped to a preset aspect ratio in the builder.

Two things worth getting right: **alt text**, because many recipients read email with images off, and the **aspect ratio**, because setting it in the builder stops images jumping around as the email loads.

## Text

Text-only blocks, for when you want copy without images:

-   **1, 2, 3 and 4 Columns** — text laid out in columns.
    
-   **Heading with paragraph text** — a heading and body copy as a pair.
    
-   **Paragraph Text** — a single block of copy.
    

Text supports inline formatting — bold, size, colour and alignment.

## CTA (buttons)

Four button blocks:

-   **1 Button** — a single centred button.
    
-   **1 Button (Full Width)** — a button that spans the content width, which works well on mobile.
    
-   **2 Buttons** — two buttons of equal weight.
    
-   **2 Buttons (mixed)** — a primary and a secondary button, for a main action with an alternative.
    

Each button needs a **label** and an **`https://` URL**. Blocks with two buttons offer a shared style setting so both match without styling each one.

## Footer

Six footers, in light and dark:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Block</p></th><th colspan="1" rowspan="1"><p>Contents</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Dark -1</strong></p></td><td colspan="1" rowspan="1"><p>Dark footer with social links</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Dark -2</strong></p></td><td colspan="1" rowspan="1"><p>Dark, simple</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Dark -3</strong></p></td><td colspan="1" rowspan="1"><p>Dark, with contact details</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Footer with social links</strong></p></td><td colspan="1" rowspan="1"><p>Light, with social icons</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Footer with Unsubscribe text</strong></p></td><td colspan="1" rowspan="1"><p>Light, with unsubscribe wording</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Footer with Follow Us</strong></p></td><td colspan="1" rowspan="1"><p>Light, with a follow prompt</p></td></tr></tbody></table>

Your unsubscribe link is a legal requirement in most markets. If your sending platform injects one automatically, use a footer without one; otherwise pick a footer that includes the unsubscribe text and point it at your platform's unsubscribe URL.

## Styling that applies to every block

-   **Background colour** — per block, so you can band sections of the email.
    
-   **Padding** — the space around the block's contents.
    
-   **Alignment** — left, centre or right.
    
-   **Width** — for images and constrained elements.
    

Keeping padding consistent between adjacent blocks is the single easiest way to make a template look finished.