---
title: "07 – Hero Image"
slug: "07-hero-image"
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.

# 07 – Hero Image

## Description

The hero usually fills the opening screen and previously had few options other than bespoke builds. This block can now have a border and be rendered smaller. Another added benefit is the option to add an independent mobile-size image. Previously, if a landscape image was used for desktop, this rendered oddly when responding down into mobile view. If the hero is swapped for a 'squarer' image for mobile the viewing experience is greater.

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/866733f4-358b-4758-8e1d-bfdf0a326704.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ab6aaacb-ae07-4349-a0a9-07051c607c27.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 | 0 |
| Right | 0 |
| Bottom | 0 |
| Left | 0 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/709bca42-a210-4e45-90d4-1ebaa37d21be.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/23d8dbf2-b6f0-40c5-8c01-dfb9c4922010.png)

### Mobile Hero Image

Used to set an independent image for mobile view. First, upload the image to the Content Store and then apply the image URL to the input field in the **Details Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Hero Image | Mobile Image | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/f92e96c6-5dc4-4967-99a6-13f553898c77.png)

### Desktop Hero Image Link

Used to add the desktop view image link.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Image Link | Desktop Hero Image Link | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4ebed999-d88c-4cbe-8a0a-cec545898ff9.png)

### Mobile Hero Image Link

Used to add the mobile view image link.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Image Link | Mobile Hero Image Link | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d959ef91-2924-4d2c-8868-d842c4082802.png)

## Compatibility

There are no known render issues with this block.