Media Banner #FF-600

views/shared/cms/_MediaBannerComponent.gsp scss/components/_media-banner.scss

Media Banner Component is used to create customized banners on any page of the website. For more information on banner creation please refer to the Confluence page. This page is just showcasing possible solutions.

Video Style A

For video banners, please paste the video URL without the format.

For example, http://i8.amplience.net/v/fitflop/SENAIT_AMY_1920_h264_052217/mp4_720p

  • FOR BEACH, BAR
    & BEYOND     

  • 
<cms:component>
  {
    "visible":true,
    "ctaText":null,
    "title1":"FOR",
    "title2":"BEACH,&nbsp;BAR<br>& BEYOND",
    "media":{  
      "code":"amplience-image-style-a",
      "altText":null,
      "mediaProvider":"AMPLIENCE_VIDEO",
      "description":null,
      "mediaFormat":"5120Wx2900H",
      "url":"https://i8.amplience.net/v/fitflop/SENAIT_AMY_1920_h264_052217"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"60px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":null,
    "external":false,
    "largeSpan":{  
      "code":"100%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row1",
    "ctaLink":null,
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style A

5120WX2900H

  • FOR BEACH, BAR
    & BEYOND     

  • 
<cms:component>
  {
    "visible":true,
    "ctaText":null,
    "title1":"FOR",
    "title2":"BEACH,&nbsp;BAR<br>& BEYOND",
    "media":{  
      "code":"amplience-image-style-a",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"5120Wx2900H",
      "url":"//i8.amplience.net/i/fitflop/image-style-a_iQushion"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"60px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"100%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row1",
    "ctaLink":"#",
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style B

5120WX1500H

  • INSIDE THE iQUSHION

    DISCOVER MORE 

  • 
<cms:component>
  {
    "visible":true,
    "ctaText": "DISCOVER MORE",
    "title1":"INSIDE THE",
    "title2":"iQUSHION",
    "media":{  
      "code":"image-style-b",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"5120Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-b"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"100%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row2",
    "ctaLink":"#",
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style C

2560WX1500H

  • THE ONES TO WATCH

    CHECK THEM OUT

    THE ONES TO WATCH

    CHECK THEM OUT 

  • 
<cms:component>
  {
    "visible":true,
    "ctaText": "CHECK THEM OUT",
    "title1":"THE",
    "title2":"ONES TO WATCH",
    "media":{  
      "code":"image-style-c",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"2560Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-c"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"50%",
      "type":"CMSSpan"
    },
    "copyJustification":"RIGHT",
    "name":"MediaBannerComponent",
    "id":"row3",
    "ctaLink":"#",
    "copyPosition":"TOP_RIGHT"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText": "CHECK THEM OUT",
    "title1":"THE",
    "title2":"ONES TO WATCH",
    "media":{  
      "code":"image-style-c_",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"2560Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-c_"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"50%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row3",
    "ctaLink":"#",
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style D

1705WX1500H

  • THE
    ONES TO WATCH

    CHECK THEM OUT

    THE
    ONES TO WATCH

    CHECK THEM OUT

    THE
    ONES TO WATCH

    CHECK THEM OUT 

  • 
<cms:component>
  {
    "visible":true,
    "ctaText": "CHECK THEM OUT",
    "title1":null,
    "title2":"THE<br>ONES TO WATCH",
    "media":{  
      "code":"image-style-d",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1705Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-d"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#ffffff",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"33.3%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row4",
    "ctaLink":null,
    "copyPosition":"TOP_LEFT"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText": "CHECK THEM OUT",
    "title1":null,
    "title2":"THE<br>ONES TO WATCH",
    "media":{  
      "code":"image-style-d_1",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1705Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-d_1"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{  
      "code":"33.3%",
      "type":"CMSSpan"
    },
    "copyJustification":"CENTRE",
    "name":"MediaBannerComponent",
    "id":"row4",
    "ctaLink":null,
    "copyPosition":"MIDDLE_CENTER"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText": "CHECK THEM OUT",
    "title1":null,
    "title2":"THE<br>ONES TO WATCH",
    "media":{  
      "code":"image-style-d_2",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1705Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-d_2"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{
      "code":"33.3%",
      "type":"CMSSpan"
    },
    "copyJustification":"RIGHT",
    "name":"MediaBannerComponent",
    "id":"row4",
    "ctaLink":null,
    "copyPosition":"BOTTOM_RIGHT"
  }
</cms:component>

Image Style E

1280WX1500H

  • FLEX. ADAPT.
    EVOLVE.

    DISCOVER MORE

    FLEX. ADAPT.
    EVOLVE.

    DISCOVER MORE

    SLIDE
    INTO SPRING

    SLIDE INTO SPRING

    SLIDE
    INTO SPRING

    SLIDE INTO SPRING 

  • 
<cms:component>
  {
    "type": "MediaBannerComponent",
    "visible":true,
    "ctaText": "DISCOVER MORE",
    "title1":null,
    "title2":"FLEX. ADAPT.<br>EVOLVE.",
    "media":{  
      "code":"image-style-e",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1280Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-e"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{
      "code":"25%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row5",
    "ctaLink":null,
    "copyPosition":"TOP_LEFT"
  }
</cms:component>
<cms:component>
  {
    "type": "MediaBannerComponent",
    "visible":true,
    "ctaText": "DISCOVER MORE",
    "title1":null,
    "title2":"FLEX. ADAPT.<br>EVOLVE.",
    "media":{  
      "code":"image-style-e_1",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1280Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-e_1"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#ffffff",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{
      "code":"25%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row5",
    "ctaLink":null,
    "copyPosition":"MIDDLE_LEFT"
  }
</cms:component>
<cms:component>
  {
    "type": "MediaBannerComponent",
    "visible":true,
    "ctaText": "SLIDE INTO SPRING",
    "title1":null,
    "title2":"SLIDE<br>INTO SPRING",
    "media":{  
      "code":"image-style-e",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1280Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-e"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{
      "code":"25%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row5",
    "ctaLink":null,
    "copyPosition":"BOTTOM_LEFT"
  }
</cms:component>
<cms:component>
  {
    "type": "MediaBannerComponent",
    "visible":true,
    "ctaText": "SLIDE INTO SPRING",
    "title1":null,
    "title2":"SLIDE<br>INTO SPRING",
    "media":{  
      "code":"image-style-e_1",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1280Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-e_1"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#ffffff",
      "type":"CMSColor"
    },
    "url":"#",
    "external":false,
    "largeSpan":{
      "code":"25%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"MediaBannerComponent",
    "id":"row5",
    "ctaLink":"#",
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style D + F

1705WX1500H + 3410WX1500H

  • THE
    ONES TO WATCH

    CHECK THEM OUT

    BEACH, BAR
    & BEYOND

    SHOP THE iQUSHION™ 

  • 
<cms:component>
  {  
    "visible":true,
    "ctaText":"CHECK THEM OUT",
    "title1":"THE<br>ONES TO WATCH",
    "title2":null,
    "media":{  
      "code":"amplience-image-style-d_1",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"1705Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-d_1"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"/uk/en#",
    "external":false,
    "largeSpan":{  
      "code":"33.3%",
      "type":"CMSSpan"
    },
    "copyJustification":"CENTRE",
    "name":"row_2_1",
    "id":"row_2_1",
    "ctaLink":"#",
    "copyPosition":"TOP_CENTER"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText":"SHOP THE iQUSHION&trade;",
    "title1":null,
    "title2":"BEACH, BAR<br>& BEYOND",
    "media":{  
      "code":"amplience-image-style-f",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"3410Wx1500H",
      "url":"//i8.amplience.net/i/fitflop/image-style-f"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{  
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"/uk/en#",
    "external":false,
    "largeSpan":{  
      "code":"66.6%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"row_2_2",
    "id":"row_2_2",
    "ctaLink":"#",
    "copyPosition":"TOP_LEFT"
  }
</cms:component>

Image Style G + H

2560WX2900H + 2560WX1450H

  • THE NEW CLASSIC SNEAKER

    GET YOUR PAIR

    FLEX. ADAPT.
    EVOLVE.

    DISCOVER MORE

    SLIDE
    INTO SPRING

    SHOP SLIDE SANDALS 

  • 
<cms:component>
  {
    "visible":true,
    "ctaText":"GET YOUR PAIR",
    "title1":"THE NEW",
    "title2":"CLASSIC SNEAKER",
    "media":{
      "code":"amplience-image-style-g",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"2560Wx2900H",
      "url":"//i8.amplience.net/i/fitflop/image-style-g"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"/uk/en#",
    "external":false,
    "largeSpan":{
      "code":"50%",
      "type":"CMSSpan"
    },
    "copyJustification":"CENTRE",
    "name":"row_4_1",
    "id":"row_4_1",
    "ctaLink":"#",
    "copyPosition":"MIDDLE_CENTER"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText":"DISCOVER MORE",
    "title1":null,
    "title2":"FLEX. ADAPT.<br>EVOLVE.",
    "media":{
      "code":"amplience-image-style-h_",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"2560Wx1450H",
      "url":"//i8.amplience.net/i/fitflop/image-style-h_"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{
      "code":"60px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"/uk/en#",
    "external":false,
    "largeSpan":{
      "code":"50%",
      "type":"CMSSpan"
    },
    "copyJustification":"RIGHT",
    "name":"row_4_2",
    "id":"row_4_2",
    "ctaLink":"#",
    "copyPosition":"MIDDLE_RIGHT"
  }
</cms:component>
<cms:component>
  {
    "visible":true,
    "ctaText":"SHOP SLIDE SANDALS",
    "title1":null,
    "title2":"SLIDE<br>INTO SPRING",
    "media":{
      "code":"amplience-image-style-h",
      "altText":null,
      "mediaProvider":"AMPLIENCE_IMAGE",
      "description":null,
      "mediaFormat":"2560Wx1450H",
      "url":"//i8.amplience.net/i/fitflop/image-style-h"
    },
    "type":"MediaBannerComponent",
    "copyPadding":{
      "code":"30px",
      "type":"CMSPadding"
    },
    "copyColor":{
      "code":"#000000",
      "type":"CMSColor"
    },
    "url":"/uk/en#",
    "external":false,
    "largeSpan":{
      "code":"50%",
      "type":"CMSSpan"
    },
    "copyJustification":"LEFT",
    "name":"row_4_3",
    "id":"row_4_3",
    "ctaLink":"#",
    "copyPosition":"BOTTOM_LEFT"
  }
</cms:component>

Image Style G + H (REVERSED)

2560WX2900H + 2560WX1450H

  • THE NEW CLASSIC SNEAKER

    GET YOUR PAIR

    FLEX. ADAPT.
    EVOLVE.

    DISCOVER MORE

    SLIDE
    INTO SPRING

    SHOP SLIDE SANDALS 

  • 
<cms:component>
  {
    "components":[
      {
        "visible":true,
        "ctaText":"GET YOUR PAIR",
        "title1":"THE NEW",
        "title2":"CLASSIC SNEAKER",
        "media":{
          "code":"amplience-image-style-g",
          "altText":null,
          "mediaProvider":"AMPLIENCE_IMAGE",
          "description":null,
          "mediaFormat":"2560Wx2900H",
          "url":"//i8.amplience.net/i/fitflop/image-style-g"
        },
        "type":"MediaBannerComponent",
        "copyPadding":{
          "code":"30px",
          "type":"CMSPadding"
        },
        "copyColor":{
          "code":"#000000",
          "type":"CMSColor"
        },
        "url":"#",
        "external":false,
        "largeSpan":{
          "code":"50%",
          "type":"CMSSpan"
        },
        "copyJustification":"CENTRE",
        "name":"row_4_1",
        "id":"row_4_1",
        "ctaLink":"#",
        "copyPosition":"MIDDLE_CENTER"
      },
      {
        "visible":true,
        "ctaText":"DISCOVER MORE",
        "title1":null,
        "title2":"FLEX. ADAPT.<br>EVOLVE.",
        "media":{
          "code":"amplience-image-style-h_",
          "altText":null,
          "mediaProvider":"AMPLIENCE_IMAGE",
          "description":null,
          "mediaFormat":"2560Wx1450H",
          "url":"//i8.amplience.net/i/fitflop/image-style-h_"
        },
        "type":"MediaBannerComponent",
        "copyPadding":{
          "code":"60px",
          "type":"CMSPadding"
        },
        "copyColor":{
          "code":"#000000",
          "type":"CMSColor"
        },
        "url":"#",
        "external":false,
        "largeSpan":{
          "code":"50%",
          "type":"CMSSpan"
        },
        "copyJustification":"RIGHT",
        "name":"row_4_2",
        "id":"row_4_2",
        "ctaLink":"#",
        "copyPosition":"MIDDLE_RIGHT"
      },
      {
        "visible":true,
        "ctaText":"SHOP SLIDE SANDALS",
        "title1":null,
        "title2":"SLIDE<br>INTO SPRING",
        "media":{
          "code":"amplience-image-style-h",
          "altText":null,
          "mediaProvider":"AMPLIENCE_IMAGE",
          "description":null,
          "mediaFormat":"2560Wx1450H",
          "url":"//i8.amplience.net/i/fitflop/image-style-h"
        },
        "type":"MediaBannerComponent",
        "copyPadding":{
          "code":"30px",
          "type":"CMSPadding"
        },
        "copyColor":{
          "code":"#000000",
          "type":"CMSColor"
        },
        "url":"#",
        "external":false,
        "largeSpan":{
          "code":"50%",
          "type":"CMSSpan"
        },
        "copyJustification":"LEFT",
        "name":"row_4_3",
        "id":"row_4_3",
        "ctaLink":"#",
        "copyPosition":"BOTTOM_LEFT"
      }
    ],
    "visible":true,
    "fullBleed":false,
    "reverseOrder":true,
    "name":"CMSRowComponent",
    "id":"comp_000000RX",
    "hideForLargeUp":null,
    "type":"CMSRowComponent",
    "hideForSmallDown":null,
    "hideForMediumOnly":null
  }
</cms:component>