Please use the below Html structure for a standard brand logo scroll area:

Standard Checkerboard Component image on the left and text on the right.
Text is left aligned on WOS (used on pre-owned page) - if you ever need it centered add the class text-center into the html next to the class cb-text
Please make Image 955 by 955.
Html variations:
Checkerboard with text first Checkerboard with quote Checkerboard with list Checkerboard with Video

To have the text first add the class checkerboard-text-first to the start of the container next to the class wosgCheckerboard-component like in the below Html:

For Quotes - use the below Html structure

For Lists - please use the below Html structure - if you do not need the check mark just delete the span in each li element

For a Checkerboard with Video please use the below Html or use any of the above and replace the cb-image div with the cb-video div from the below Html.
Video must be mp4.
Make sure to change the poster image for each video

The video has aspect ratio: 1 / 1; to make the video appear square when using a portrait video that is too big for the component. This can be removed from the html if needed.

The Javascript for this component auto plays once the user scrolls to the video on the page. If you don't want this just don't add the Javascript to the page and delete the class auto-play-wosg-video from the html.

Please only add the Javascript in this component to a page once. Even if you have more than one of these video components on a page.
If you have more than one place the Javascript in the last component of this type on the page.

Standard Product with Hero Image Component - Image on the right and product on the left.
Standard version shows 4 products and products scroll horizontally on tablet / mobile
Html variations:
Product with Hero Img - Img First Product with Hero Image - Scrolling product desktop Product with Hero Image - 3 Wide products Product with Hero Image - 3 Wide products & desktop scrolling Product with Hero Image - Button link Product with Hero Image - Text on Hero Image

To have the Hero Image on the left on desktop add the class productRight onto the main container after the class wosgProductWithHeroImg

To make the product scroll vertically on desktop add at least 6 products and add the class scrollProductDesktop to the components main container after the class wosgProductWithHeroImg or use the below HTML:

To make the product show 6 products (3 wide) on desktop add 6 products and add the class threeWideProduct to the components main container after the class wosgProductWithHeroImg or use the below HTML:

To have a button as the link instead of the standard underlined version - please use the below Html, change the colour of the button in the inline styling in the html

To have text on the Hero image instead please use the below Html:

To any Four Wide Product Component - add the class wosgScrollAllComponent to make the product scroll & add navigation arrows.
This is 5 & peaking on desktop, 3 & peaking on tablet and 2 & peaking on mobile.
The Link is hidden so the product can scroll so you will have to add the link into the sub-title in an < a > tag like in the below component:
Scrolling Product Component - Revert Titles Scrolling Product Component - Custom Button Scrolling Product Component - One & Peaking Mobile

To Revert the titles to be left aligned & allow paragraph text to be added also add the class wosgRevertTitles to the component.
Make sure to set Title and Sub Title to Left Aligned for this to work.

If you want a button that sits below the product component, make sure your product component has no padding-bottom added and then add this in a html block directly below.
To change the button colour change the inline styling in the html.

to make the mobile scroll option 1 & peaking instead of 2 & peaking - add the class wosgOneWideMob to the component like the below.
This can be used alongside the revert titles class (like below) or without.

Video Component with a poster image for mp4 videos.
Please remember to replace poster image 1700px by 960px.
Please remember to update the aria label saying what the video is if there is no desciptive title for the video - if you are including a title & copy which tells you what the video is about, please delete the aria-label on the video tag.
Titles - you can move these to be above or below the video. Just move everything inside the div with class vid-title to sit below the the div col-md-12 that the video sits in.
just delete everything in the div with class vid-title if you do not want a title.

Version with custom play button added
Video with Cover Image & Custom Button

Video Component with cover image and custom button for youtube videos. (have used Rolex for an example).
Make cover image width="1682" height="946"
Leave the image alt tag empty, but remember to update the iframe title - usually update this to the title of the video on youtube.