---
title: "11 – Voucher/Coupon"
slug: "11-vouchercoupon"
updated: 2024-07-11T15:07:34Z
published: 2024-07-11T15:07:34Z
---

> ## 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.

# 11 – Voucher/Coupon

## Description

This block has the same features as block 10 but with the added option of including a voucher code or discount code in conjunction with uploading coupon codes to Engage or a single manual generic code. A 50/50 split between image and text with the option to swap the content left or right. Editable image, title, Voucher/Coupon Code, CTA. All these elements also have the option to Hide or Show.

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d325851a-c526-4628-baca-8d4fa7d696f1.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6a4c388d-b74c-4c5e-9e6f-cb03613db470.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**.

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

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d10f726c-56b3-4429-baac-56e69573da31.png)

### Hide/Show

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

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

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6675c4b2-a0b7-48b6-b155-db78a7bb0e81.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/c6311e87-86d9-477e-9c68-1596a84dc901.png)

### Image Position

There are multiple alignment options, all of which can be found in the drop-down menu.

| **Option** | **Drop-down** | **Default** |
| --- | --- | --- |
| Image Position [](http://height.As) | Above | Left |
| Hidden |
| Left |
| Right |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/b0e3e076-1f19-446b-ae09-df36a256812c.png)

### Font Weight

Set the weight of each text element independently.

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

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/a09c07b4-8f39-4699-8a2b-c9ede7539ac9.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 |
| Voucher | 18 |
| Validity | 18 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/385f5054-a9bc-47d2-89b3-bfbe26f8f70a.png)

### Manual Offer Code

This is used to manually set an offer code. Enter the code into the code field.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Voucher Offer Code | Voucher Manual Offer Code | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/5a634a4a-2132-4b46-9d89-02df65795c03.png)

### Dashed Border Color

The dashed border color can be changed, but please be sure to use a 6-digit HEX value.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Voucher Border Color | Voucher Dashed Border Color | #000000 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/9e1db72c-2292-4095-abb7-349d03c344d7.png)

### Manual Offer Code Validity

Enter some text to inform recipients of when the code or voucher is due to expire.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Offer Validity | Manual Offer Code Validity | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/2c4126cb-391c-4aba-ac00-15cd6f245286.png)

### CTA

It allows you to format the CTA button as required. Details are below. It takes the color's hexacode as the value to change the color wherever applicable.

| **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/2532b4cf-7a33-4d2b-94f7-02c11f582281.png)

### Links

Add links to the image and CTA.

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

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/f9c12b66-0eb2-4363-808c-c8dc56df9e2c.png)

### Mobile Header Font Size

The mobile font size can be set using the **Advanced Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Font Size | Mobile Header Font Size | 24 |

## Compatibility

Currently, the CTA button curved border does not render 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