--- title: "13 – 1 or 2 Products" slug: "13-1-or-2-products" updated: 2024-08-16T11:09:42Z published: 2024-08-16T11:09:42Z canonical: "docs.mapp.com/13-1-or-2-products" --- > ## 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. # 13 – 1 or 2 Products ## Description This block can display one or two products with text and a button under each image tile. All of the elements can be hidden or shown and are fully editable. The text areas consist of an item title or description, price, and button. Of course, the price element is not fixed and can be used for any text-based purpose. Images can be side by side in desktop and mobile view and stacked in mobile. > [!NOTE] > Notice > > To keep the quality of image responsiveness in smaller devices a minimum width of between 480px / 520px will cover all responsive devices when stacking is on. Images may then look oversized in Edit mode but look okay in Preview mode. Edit the text area before loading the image(s). ## Default block view **Desktop** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/7dddaa42-a558-445c-85c5-e111fd7567cf.png) **Mobile** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d408230c-0520-475c-ab71-256f6611b829.png) ## Formatting options ### Padding This refers to the space between the content of the block and its border. This can be edited in the **Details Tab**. | **Option** | **Details** | **Default** | | --- | --- | --- | | Padding | Top | 10 | | Right | 10 | | Bottom | 10 | | Left | 10 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ad339fa6-af23-472e-964e-e1e2ab3adbfc.png) ### Number of Products Use the drop-down to select the number of product tiles. | **Option** | **Details** | **Default** | | --- | --- | --- | | Number of Products | 1 | 2 | | 2 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/bd338e0b-d3f2-4837-a0ec-13578ed2d554.png) ### Stack Mobile Images Changing the toggle will set the product tiles to stack in mobile or not. | **Option** | **Details** | **Default** | | --- | --- | --- | | Hide/Show Stack Images | Stack Mobile Images | Show | ### 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/253e6dc8-eb32-4c5e-8e10-e9adce5eba5b.png) ### Space between Two Images It allows you to change product spacing. | **Option** | **Details** | **Default** | | --- | --- | --- | | Space | Space Between Two Images | 50 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d1b0cf20-7201-4ffd-a3f3-403ec59bdcb8.png) ### Left & Right Section - Hide/Show Use the toggles to hide or show all the different elements. All the elements are independent of one another. | **Option** | **Details** | **Default** | | --- | --- | --- | | Left Section Hide/Show | Image | Show | | Title | Show | | Price | Show | | Was Price | Hide | | CTA | Show | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/db41c703-8cd0-4360-b82a-331c0ec6dc6b.png) ### Left & Right Section - 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** | | --- | --- | --- | | Left Section Line Height | Title | 18 | | Price | 18 | | Was Price | 18 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ed26e22e-4658-45e8-abda-1141a78b172f.png) ### Left & Right Section - Font Weight Used to change the font weight for the text elements. All are independent of one another. | **Option** | **Details** | **Dropdown** | **Default** | | --- | --- | --- | --- | | Left Section Font Weight | Title | Bold/Normal | Bold | | Price | Bold | | Was Price | Bold | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/61b572b1-7a2a-40a0-81e4-88954b5bce52.png) ### Links It allows you to add the link to the image and CTA button. | **Option** | **Details** | **Default** | | --- | --- | --- | | Links | Left Image | Blank | | Left CTA | https://www.example.com | | Right Image | Blank | | Right CTA | https://www.example.com | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/713246be-05c4-40b9-956b-87ecea240b1d.png) ### CTA All CTAs have multiple styling options. As with all colors, please use HEX values. These CTAs are not independent. Changing the setting will change the styles for both CTAs. | **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/1f38214b-3444-4cf6-984a-dc7dd5f86249.png) ### Space between two Products This option edits the space between images on mobile when stacked. It will need to be updated using the options in the **Advanced tab**. | **Option** | **Details** | **Default** | | --- | --- | --- | | Space between two Product | Space between two Products when Stacked in Mobile | 10 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/7699e2c4-b236-4bba-830f-c943da6605fd.png) ## 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