> ## Documentation Index
> Fetch the complete documentation index at: https://docs.conversion.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Email Blocks

> Reference for every content block available in the Conversion email builder.

Blocks are the building units of every email. Drag them from the toolbar at the bottom of the canvas into your email to build up your layout and content.

## Shared styling options

Many blocks share a common set of styling controls in their settings panel:

| Property          | Description                                       |
| ----------------- | ------------------------------------------------- |
| **Padding**       | Horizontal and vertical spacing inside the block. |
| **Border radius** | Rounding applied to the block's corners.          |
| **Border**        | Toggle to show or hide a border around the block. |
| **Border color**  | The colour of the border.                         |
| **Border width**  | The thickness of the border in pixels.            |

***

## Block types

<AccordionGroup>
  <Accordion title="Section" defaultOpen>
    Sections are the structural containers of your email. All other blocks sit inside sections.

    **Columns:** Sections can be configured with between 1 and 4 columns, letting you stack blocks horizontally. Any number of blocks can be stacked vertically within a column.

    <Note>
      You cannot nest a section inside another section. For complex layouts that require such behaviour, use an [HTML block](#html).
    </Note>

    | Property            | Description                                                                                                |
    | ------------------- | ---------------------------------------------------------------------------------------------------------- |
    | **Background**      | Background colour for the section.                                                                         |
    | **Alignment**       | Align column contents to the top, middle, or bottom.                                                       |
    | **Mobile stacking** | When enabled, multi-column sections stack vertically on mobile devices rather than appearing side by side. |
  </Accordion>

  <Accordion title="Heading">
    Headings can be added at any of four levels: Heading 1, 2, 3, or 4.

    | Property         | Description                                                 |
    | ---------------- | ----------------------------------------------------------- |
    | **Heading type** | Select H1 through H4.                                       |
    | **Color**        | Override the default heading colour set in the Theme panel. |
    | **Font family**  | Override the default font.                                  |
    | **Font size**    | Override the default size.                                  |
    | **Line height**  | Control vertical spacing between lines.                     |
    | **Align**        | Left, centre, or right.                                     |
  </Accordion>

  <Accordion title="Text">
    Add a body text block for paragraph content.

    | Property        | Description                                              |
    | --------------- | -------------------------------------------------------- |
    | **Color**       | Override the default text colour set in the Theme panel. |
    | **Font family** | Override the default font.                               |
    | **Font size**   | Override the default size.                               |
    | **Line height** | Control vertical spacing between lines.                  |
    | **Align**       | Left, centre, or right.                                  |
  </Accordion>

  <Accordion title="Image">
    Add an image to your email. Images can also act as clickable links.

    | Property     | Description                                                                                                                                                                   |
    | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | **Image**    | Upload from your local computer, or choose from images already stored in your Conversion workspace.                                                                           |
    | **Alt text** | A text description of the image, displayed when the image cannot be loaded and read by screen readers. Improves accessibility even if images are blocked by the email client. |
    | **Link**     | Attach a URL so the image becomes clickable.                                                                                                                                  |
    | **Scale**    | Adjust the display size of the image.                                                                                                                                         |

    <Tip>
      To link to an email address instead of a webpage, add `mailto:` before the address (e.g., `mailto:support@example.com`). This opens the recipient's mail client instead of navigating to a website.
    </Tip>
  </Accordion>

  <Accordion title="Logo">
    Add your brand logo to the email. The Logo block gives you control over height and positioning independently of the image scale.

    | Property     | Description                                                                                 |
    | ------------ | ------------------------------------------------------------------------------------------- |
    | **Image**    | Upload from your local computer, or choose from images stored in your Conversion workspace. |
    | **Alt text** | A text description of the logo for accessibility.                                           |
    | **Link**     | Make the logo clickable. Commonly used to link back to your website homepage.               |
    | **Height**   | Set the display height of the logo in pixels.                                               |
    | **Position** | Align the logo to the left, centre, or right of its container.                              |

    <Tip>
      To link to an email address instead of a webpage, add `mailto:` before the address (e.g., `mailto:support@example.com`). This opens the recipient's mail client instead of navigating to a website.
    </Tip>
  </Accordion>

  <Accordion title="Button">
    Add a call-to-action button with customisable label and destination link.

    | Property             | Description                                                                         |
    | -------------------- | ----------------------------------------------------------------------------------- |
    | **Label**            | The text displayed on the button.                                                   |
    | **Link**             | The URL the button navigates to on click. Type `/` to access dynamic link commands. |
    | **Background color** | The button's fill colour.                                                           |
    | **Text color**       | The colour of the button label.                                                     |
    | **Font size**        | Size of the button label text.                                                      |
    | **Font family**      | Font used for the button label.                                                     |

    <Tip>
      To link to an email address instead of a webpage, add `mailto:` before the address (e.g., `mailto:support@example.com`). This opens the recipient's mail client instead of navigating to a website.
    </Tip>
  </Accordion>

  <Accordion title="Socials">
    Add a row of social media icons that link to your profiles.

    **Supported platforms:** LinkedIn, X, Instagram.

    | Property     | Description                                                              |
    | ------------ | ------------------------------------------------------------------------ |
    | **Style**    | Choose between filled icon, outlined icon, or icon-only (no background). |
    | **Color**    | Set the icon colour.                                                     |
    | **Size**     | Set the icon size in pixels.                                             |
    | **Position** | Align the icon row to the left, centre, or right.                        |
  </Accordion>

  <Accordion title="HTML">
    Insert a custom HTML block for advanced layouts and interactions that the standard blocks don't support. The HTML editor supports [Liquid](/product-docs/liquid/overview) templating.

    *Common use cases include: hover state colour changes, section-within-section layouts, custom animations, etc.*

    <Warning>
      Custom HTML is for advanced users only. Invalid HTML may cause rendering issues in your email. Always use the Preview & Test Send feature to verify your HTML renders correctly before sending.
    </Warning>
  </Accordion>

  <Accordion title="Divider">
    Add a horizontal rule to visually separate sections of your email.
  </Accordion>

  <Accordion title="Unsubscribe">
    Add an unsubscribe link to your email, allowing recipients to opt out of future marketing emails. Conversion automatically adds an Unsubscribe block to the bottom of every new email. If you attempt to delete it, you will receive a warning.

    <Warning>
      We strongly recommend including an Unsubscribe block in every email you send. Emails without an unsubscribe option are more likely to be marked as spam by recipients, which damages your domain's reputation and reduces deliverability.
    </Warning>
  </Accordion>
</AccordionGroup>

<Tip>
  To link to an email address instead of a webpage, add `mailto:` before the address (e.g., `mailto:support@example.com`)
</Tip>
