GoPro theme configs

card-animation.js

// Position config for GoPro Cards
"position": {
  "x": '-50%',
  "y": '6%',
},
// Animation config for Cards
"animate": {
  "duration": {
    "start": .3,
    "end": .3
  },
  "from": {
    "left": "50%",
    "opacity": 0
  },
  "config":[
    {
      "y": '30%',
      "opacity": 1
    },
    {
      "opacity": 0,
      "y": "7%"
    }
  ]
}

default-card.html

<div class="ivp-card--large">
  <div class="ivp-card-content">
    <div class="ivp-container">
      <div class="ivp-row">
        <div class="ivp-col-8 ivp-card-text">
          <h3>${product}</h3>
          <hr>
          <p class="ivp-gopro-card-description">${description}</p>
          <p class="ivp-gopro-card-compat">${compat}</p>
        </div>
        <div class="ivp-col-4 ivp-card-image">
          <img src="${image}">
        </div>
      </div>
    </div>
  </div>
  <div class="ivp-gopro-card-footer">
    <div class="ivp-container">
      <div class="ivp-row">
        <div class="ivp-col-6">
          <h3 class="ivp-gopro-bundle-name">${bundle}</h3>
          <p class="ivp-gopro-card-price">${price}</p>
          <div class="ivp-gopro-cart-status">
            <span class="ivp-gopro-cart-icon"></span> Added to Cart</div>
        </div>
        <div class="ivp-col-6">
          <div class="ivp-card-ctas"><a class="ivp-card-cta ivp-card-cta--primary" href="#" target="_blank">Add Bundle To Cart</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

default-card.js

// Default GoPro card
{
  "id": 1,
  "text": "<div class=\"ivp-card--large\"><div class=\"ivp-card-content\"><div class=\"ivp-container\"><div class=\"ivp-row\"><div class=\"ivp-col-8 ivp-card-text\"><h3>${product}</h3><hr><p class=\"ivp-gopro-card-description\">${description}</p><p class=\"ivp-gopro-card-compat\">${compat}</p></div><div class=\"ivp-col-4 ivp-card-image\"><img src=\"${image}\"></div></div></div></div><div class=\"ivp-gopro-card-footer\"><div class=\"ivp-container\"><div class=\"ivp-row\"><div class=\"ivp-col-6\"><h3 class=\"ivp-gopro-bundle-name\">${bundle}</h3><p class=\"ivp-gopro-card-price\">${price}</p><div class=\"ivp-gopro-cart-status\"><span class=\"ivp-gopro-cart-icon\"></span> Added to Cart</div></div><div class=\"ivp-col-6\"><div class=\"ivp-card-ctas\"><a class=\"ivp-card-cta ivp-card-cta--primary\" href=\"#\" target=\"_blank\">Add Bundle To Cart</a></div></div></div></div></div></div>"
}

// The data object passed to this template should include the following fields:
{
 "data": {
   "product": "Hero 4",
   "description": "Long text description",
   "compat": "Compatibility: All Go Pro Cameras.",
   "image": "someimage",
   "bundle": "SkyDiving Bundle",
   "price": "US$499.99"
 }
}

end-card-template.html

<div class="ivp-card--large">
  <div class="ivp-card-content">
    <div class="ivp-container">
      <div class="ivp-row">
        <div class="ivp-col-12 ivp-end-card-text">
          <h3>Included in this Bundle</h3>
        </div>
        <div class="ivp-col-12 ivp-end-card-image">
          <img src="${image}">
        </div>
      </div>
    </div>
  </div>
  <div class="ivp-gopro-card-footer">
    <div class="ivp-container">
      <div class="ivp-row">
        <div class="ivp-col-6">
          <h3 class="ivp-gopro-bundle-name">${bundle}</h3>
          <p class="ivp-gopro-card-price">${price}</p>
        </div>
        <div class="ivp-col-6">
          <div class="ivp-card-ctas"><a class="ivp-card-cta ivp-card-cta--primary" href="#" target="_blank">Add Bundle To Cart</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

end-card-template.js

// End Card template
{
 "id": 2
 "text": "<div class=\"ivp-card--large\"><div class=\"ivp-card-content\"><div class=\"ivp-container\"><div class=\"ivp-row\"><div class=\"ivp-col-12 ivp-end-card-text\"><h3>Included in this Bundle</h3></div><div class=\"ivp-col-12 ivp-end-card-image\"><img src=\"${image}\"></div></div></div></div><!-- / .ivp-card-content --><div class=\"ivp-gopro-card-footer\"><div class=\"ivp-container\"><div class=\"ivp-row\"><div class=\"ivp-col-6\"><h3 class=\"ivp-gopro-bundle-name\">${bundle}</h3><p class=\"ivp-gopro-card-price\">${price}</p></div><div class=\"ivp-col-6\"><div class=\"ivp-card-ctas\"><a class=\"ivp-card-cta ivp-card-cta--primary\" href=\"#\" target=\"_blank\">Add Bundle To Cart</a></div></div></div></div></div><!-- / .ivp-gopro-card-footer --></div>"
}

// The data object passed to this template should include the following fields:
{
 "data": {
   "bundle": "Skydiving Bundle",
   "image": "//someimage.com",
   "price": "US$499.99"
 }
}

notification-animation.js

// Animation config for HotSpot notifications
"animate": {
  "duration": {
    "start": 0.25,
    "end": 0.25
  },
  "from": {
    "y": "-100%",
    "height": "0",
    "scale": "0"
  },
  "config":[{
    "scale": "1",
    "y":"0%",
    "height":"145px"
  },{
    "scale": "0",
    "opacity": 0,
    "height": 0,
  }]
}