Promo reveal

< Context / Components

Promo reveal

Introduction

An offer image when click will transition to show another image with a link. e.g. flip this card over to see our offer.

Body

coverImg

-URL

Image shown when the email loads.

revealImg

-URL

Image shown when the cover is transitioned

alt

-plain text

Alt text, applies to both images.

href

-URL

Link for revealImg

style

-selected

Select the transition when clicked, options are slide, flip and none.

cursor

-URL

Optional image for custom cursor.

Style

Style

Styling on the component container.

borderEffect

Colour of the edge of the card. Only visible when flip is selected.

revealfrontcard

Styling on card before it's clicked.

reveal

Styling on card after it's clicked.

Example

{
  "type":"promoReveal",
  "body":{
    "id":"promo-gift",
    "coverImg":"https://s3.amazonaws.com/rebelmail-templates/1800flowers/cardflip/images/version2/card.gif",
    "revealImg":"https://s3.amazonaws.com/rebelmail-templates/1800flowers/cardflip/images/version2/reveal15.gif",
    "alt":"An Exclusive Gift, from us to you!",
    "href":"http://www.example.com",
    "style":"flip",
    "cursor":""
  },
  "style":{
    "width":"490",
    "height":"392",
    "background":{
      "color":"#ffffff",
      "image":"https://s3.amazonaws.com/rebelmail-templates/1800flowers/cardflip/images/version2/background.jpg"
    },
    "borderEffect":{
      "color": "pink"
    },
    "revealfrontcard": {
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      }
    },
    "reveal": {
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      }
    }
  }
}