---
title: "10 – Image Left/Right with text"
slug: "10-image-leftright-with-text"
updated: 2024-07-11T15:07:34Z
published: 2024-07-11T15:07:34Z
canonical: "docs.mapp.com/10-image-leftright-with-text"
---

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

# 10 – Image Left/Right with text

## Description

A 50/50 width split view between an image and text area with the option to swap the image or text to the left or right sides. All the elements are editable - title, text area, and button. These can also be hidden or shown independently of one another. No matter which side the image is in desktop view the image will always render above the text in mobile view.

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/c5d5d858-b5a2-4467-9487-839813c4e141.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/7e87e7ab-3f7d-4754-b0bf-7088300f1b52.png)

## Formatting options

### Padding

This refers to the space between the block's content and its border. This can be edited in the **Details Tab**.

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/34d854ce-8dc6-4cf7-a5b1-8bbba8f537c4.png)

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Padding | Top | 10 |
| Right | 20 |
| Bottom | 10 |
| Left | 20 |

### Hide/Show

Use the toggles to hide or show all the different elements.

| Option | **Details** | **Default** |
| --- | --- | --- |
| Hide/Show | - Image - Title - Text - CTA | Show |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d41d5f88-f73a-4717-9336-d941f1369140.png)

### Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Background Color | Block Background Color | #ffffff |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/11162bdb-b509-40f0-8797-393d989b6153.png)

### Image Position

Use the drop-down selection to align the block content.

| **Option** | **Dropdown** | **Default** |
| --- | --- | --- |
| Image Position | Above | Right |
| Hidden |
| Left |
| Right |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/f78b8912-5513-4ecd-8ac8-64b2ae01b394.png)

### Font Weight

Used to independently set the font weight for both text elements – Bold or normal.

| **Option** | **Details** | **Dropdown** | **Default** |
| --- | --- | --- | --- |
| Font Weight | Title | Bold/Normal | Bold |
| Text | Normal |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/dc36ad7e-d8ef-4941-ab0e-47b50f9b5335.png)

### Line Height

Used to change the text line height.

> As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Line Height | Title | 34 |
| Text | 18 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/1291b5b1-7419-4cae-aed7-f7134de6fb52.png)

### CTA

All CTA's have multiple styling options. As with all colors, please use HEX values.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| CTA | Background Color | #e71825 |
| Text Color | #ffffff |
| Font weight | Bold |
| Border radius | 6 |
| Border width | 1 |
| Border Color | #e71825 |
| Height | 52 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4b7d2399-cf3c-415d-ab33-3ec94ac74220.png)

### Links

Links can be added to both the image and the CTA.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Links | Image | Blank |
| CTA | https://www.example.com |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ae6e198a-b848-4204-bafb-9320b9ee600d.png)

## Compatibility

Currently, the CTA button curved border is not rendered in the devices listed below. Instead, the corners will be square.

GMX Chrome Windows 10 GMX Edge Windows 10 GMX Firefox Windows 10 Web.de Chrome Windows 10 Web.de Edge Windows 10 Web.de Firefox Windows 10