< Context / Components

Hotspots

Introduction

Small hotspots that appear over a background image. When clicked content pops up.

Body

spotAnimation

-Boolean

Should the spots have a pulsing animation or not.

arrows

-Boolean

body description

spots

-Boolean

Should the spots have a small arrow coming out the side or not.

Spots

-Array

Add a value for each hot spot to include.

  • left

    -Number

    Position in px from the left side of the background. The px will automatically be converted to % for responsive layouts.

    top

    -Number

    Position in px from the top side of the background. The px will automatically be converted to % for responsive layouts.

    placement

    -Select

    What side should the pop up appear comparative to the hotspot. Options are above, below, left, right, center. If center will place the popup in the center of the component rather than the center of the spot location. All placements are converted to center for mobile.

    popupHeight

    -Number

    Defines the height of the popup box in px.

    popupWidth

    -Number

    Defines the width of the popup box in px.

    popupContent.img.href

    -URL

    Option link applied to the image in the popup.

    popupContent.img.src

    -URL

    Link of image to include

    popupContent.img.height

    -Number

    Image height in px

    popupContent.img.width

    -Number

    Image width in px

    popupContent.img.alt

    -plain text

    Alt text to describe image.

    popupContent.h3

    -text

    Heading text for popup content.

    popupContent.p

    -text

    Paragraph text for popup content.

    popupContent.cta.href

    -URL

    Link for CTA button.

    popupContent.cta.text

    -text

    Text to include in CTA button.

    popupContent.cta.width

    -number

    Width of CTA button in px. If left blank the button will just fit to the text.

Style

Style

Styling on the component container.

spots

Styling on the spots.

spots.hover

Styling on the spots, when hovered.

popup

Styling on the popup container.

popupH3

Styling on the H3 tags in the popup.

popupP

Styling on the paragraph tags in the popup.

popupCTA

Styling on the CTA buttons in the popup.

popupCTA.hover

Styling on the CTA buttons in the popup, when hovered.

Example

{
  "type":"hotspots",
  "body":{
    "id":"test1",
    "spotAnimation":true,
    "arrows":true,
    "spots":[
      {
        "left":"25",
        "top":"250",
        "placement":"right",
        "popupHeight":"300",
        "popupWidth":"300",
        "popupContent":{
          "img":{
            "href":"",
            "src":"https://unsplash.it/g/300/300?image=736",
            "height":"300",
            "width":"300",
            "alt":"alt text"
          },
          "h3":"Optional headline",
          "p":"Optional descriptive copy",
          "cta":{
            "href":"http://example.com",
            "text":"LEARN MORE",
            "width":"200"
          }
        }
      },
      {
        "left":"465",
        "top":"250",
        "placement":"left",
        "popupHeight":"300",
        "popupWidth":"300",
        "popupContent":{
          "img":{
            "href":"",
            "src":"https://unsplash.it/g/300/300?image=736",
            "height":"300",
            "width":"300",
            "alt":"alt text"
          },
          "h3":"Optional headline",
          "p":"Optional descriptive copy",
          "cta":{
            "href":"http://example.com",
            "text":"LEARN MORE",
            "width":"200"
          }
        }
      }
    ]
  },
  "style":{
    "width":"500",
    "height":"500",
    "background":{
      "image":"https://unsplash.it/500/500?image=737"
    },
    "margin":{
      "top": "5",
      "right": "5",
      "bottom":"5",
      "left": "5"
    },
    "border":{
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "spots":{
      "width":"40",
      "height":"40",
      "background":{
        "image":"http://images.clipartpanda.com/target-clipart-clipart-target-256x256-ae64.png",
        "position":"center center",
        "size":"75% 75%",
        "repeat":"no-repeat",
        "color":"rgba(0,0,0,0.2)"
      },
      "border":{
        "color": "red",
        "width": "2",
        "style":"solid",
        "radius": "20"
      },
      "boxShadow": {
        "horizontalOffset": "2",
        "verticalOffset": "2",
        "blur": "2",
        "spread": "1",
        "color": "rgba(0,0,0,0.2)"
      },
      "hover":{
        "width":"150",
        "background":{
          "color":"#f8b459"
        },
        "padding":{
          "top": "",
          "right": "",
          "bottom":"",
          "left": ""
        },
        "margin":{
          "top": "",
          "right": "",
          "bottom":"",
          "left": ""
        },
        "border":{
          "color": "#f69513",
          "width": "2",
          "style":"solid",
          "radius": "8"
        },
        "font": {
          "color": "#f69513",
          "decoration": "",
          "family": "",
          "style": "",
          "weight": "",
          "size": "",
          "align": ""
        }
      }
    },
    "popup":{
      "background":{
       "color":"#ffffff"
      },
      "padding":{
        "top": "5",
        "right": "5",
        "bottom":"5",
        "left": "5"
      },
      "border":{
        "color": "#333",
        "width": "2",
        "style":"solid",
        "radius": "2"
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      }
    },
    "popupH3":{
      "margin":{
        "top": "5",
        "right": "5",
        "bottom":"5",
        "left": "5"
      },
      "font": {
        "color": "#333",
        "decoration": "",
        "family": "Arial, Helvetica, sans-serif",
        "style": "",
        "weight": "bold",
        "size": "22",
        "align": "center"
      }
    },
    "popupP":{
      "margin":{
        "top": "5",
        "right": "5",
        "bottom":"5",
        "left": "5"
      },
      "font": {
        "color": "#333",
        "decoration": "",
        "family": "Arial, Helvetica, sans-serif",
        "style": "",
        "weight": "normal",
        "size": "16",
        "align": "center",
        "height": "100"
      }
    },
    "popupCTA":{
      "width":"200",
      "background":{
        "color":"#ffffff"
      },
      "padding":{
        "top": "5",
        "right": "5",
        "bottom":"5",
        "left": "5"
      },
      "margin":{
        "top": "5",
        "right": "auto",
        "bottom":"5",
        "left": "auto"
      },
      "border":{
        "color": "#f69513",
        "width": "2",
        "style":"solid",
        "radius": "8"
      },
      "font": {
        "color": "#f69513",
        "decoration": "",
        "family": "Arial, Helvetica, sans-serif",
        "style": "",
        "weight": "",
        "size": "18",
        "align": "center"
      },
      "hover":{
        "width":"",
        "background":{
          "color":"#ecb66d"
        },
        "padding":{
          "top": "",
          "right": "",
          "bottom":"",
          "left": ""
        },
        "margin":{
          "top": "",
          "right": "",
          "bottom":"",
          "left": ""
        },
        "border":{
          "color": "#f69513",
          "width": "2",
          "style":"solid",
          "radius": "8"
        },
        "font": {
          "color": "#fff",
          "decoration": "",
          "family": "",
          "style": "",
          "weight": "",
          "size": "",
          "align": ""
        }
      }
    }
  }
}