Banners & Images #OOTB

The SCSS variables for modifying banners can be found in the _brand.scss file, in the "Banners" section.

Banner Style 1 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "media": {
      "altText": null,
      "description": null,
      "mediaProvider": "AMPLIENCE_IMAGE",
      "url": "//i8.amplience.net/i/fitflop/image-style-a_iQushion"
    },
    "headline": "Banner title",
    "content": "
    “My mother used to read to me every night when I was little. We got through most of the major fantasy books of that time. The Narnia books by C.S. Lewis were my favorites and, later, Tolkien's The Lord of the Rings. I started making dolls to fill in the gaps of the dolls I had. Obviously we couldn't buy centaurs and fauns and elves and fairies, so I made them to play with the normal dolls I had. I must have been about six years old when I started making fantasy dolls.”
    "
  }
</cms:component>

Banner Style 2

Custom HTML content 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "bannerStyle": "STYLE2",
    "media": {
      "altText": null,
      "description": null,
      "mediaProvider": "AMPLIENCE_IMAGE",
      "url": "//i8.amplience.net/i/fitflop/image-style-a_iQushion"
    },
    "headline": "Like our shoes?",
    "content": "<button class='button'>Tell us about it</button>"
  }
</cms:component>

Banner Style 2

Copy Position: Left 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "bannerStyle": "STYLE2",
    "copyPosition": "LEFT",
    "media": {
      "altText": null,
      "description": null,
      "mediaProvider": "AMPLIENCE_IMAGE",
      "url": "//i8.amplience.net/i/fitflop/image-style-h"
    },
    "headline": "<g:message code="styleguide.banners.demo.banner.title" />",
    "content": "<g:message code="styleguide.banners.demo.contentInside.1" />"
  }
</cms:component>

Banner Style 2

Copy Position: Right 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "bannerStyle": "STYLE2",
    "copyPosition": "RIGHT",
    "media": {
      "altText": null,
      "description": null,
      "mediaProvider": "AMPLIENCE_IMAGE",
      "url": "//i8.amplience.net/i/fitflop/image-style-h_"
    },
    "headline": "<g:message code="styleguide.banners.demo.banner.title" />",
    "content": "<g:message code="styleguide.banners.demo.contentInside.1" />"
  }
</cms:component>

Banner Style 3 Text Only

Copy Position: Left 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "bannerStyle": "STYLE3",
    "copyPosition": "LEFT",
    "headline": "<g:message code="styleguide.banners.demo.banner.title" />",
    "content": "<g:message code="styleguide.banners.demo.contentInside.2" />"
  }
</cms:component>

Banner Style 3 Text Only

Copy Position: Center 

  • 
<cms:component>
  {
    "type": "BannerComponent",
    "bannerStyle": "STYLE3",
    "copyPosition": "CENTER",
    "content": "<g:message code="styleguide.banners.demo.contentInside.1" />"
  }
</cms:component>

Simple Banner

  • styleguide.banners.altText 
  • 
<cms:component>
  {
    "type": "SimpleBannerComponent",
    "media": {
    "code": "/images/theme/logo-hybris.png",
    "altText": "<g:message code="styleguide.banners.altText" />",
    "description": null,
    "mediaFormat": null,
    "url": "https://www.fitflop.com/assets/styleguide/banner1-1e037522f59bb5da4ad64f06a22ecfdd.jpg"
  },
    "name": "Site Logo Component",
    "url": "/"
  }
</cms:component>

CMS Image

  • styleguide.banners.altText 
  • 
<cms:component>
  {
    "type": "CMSImageComponent",
    "media": {
      "altText": "<g:message code="styleguide.banners.altText" />",
      "url": "https://www.fitflop.com/assets/styleguide/cmsimage-6b130fc984bd85316850c3268a4bd9b2.jpg"
    }
  }
</cms:component>

Image Map

  • styleguide.banners.altText 1 
  • 
<cms:component>
  {
    "type": "ImageMapComponent",
    "media": {
      "altText": "<g:message code="styleguide.banners.altText" />",
      "url": "https://www.fitflop.com/assets/styleguide/cmsimage-6b130fc984bd85316850c3268a4bd9b2.jpg"
    },
    "imageMapHtml": "<area alt='1' title='One' href='/' shape='rect' coords='39,109,683,182' style='outline:none;' target='_self' />"
  }
</cms:component>