Content Editor Sandbox
Media
IAL JSS Component Set
For purposes of this page, the component set comprises all media-focused components that can be added to multiple pages. Specialist components for specific pages such as Article, Account, Checkout, etc are excluded.
Components should be reviewed at four optimised breakpoints
- 1920px (Full)
- 1280px (Desktop)
- 768px (Tablet)
- <768px (Mobile)
A-F |
G-L |
M-R |
S-Z |
|
|
|
|
|
Known issues with the page:
- example
- example
ContentContainerBlock
JSS component is missing React implementation. See the developer console for more information.
ContentContainerBlock
JSS component is missing React implementation. See the developer console for more information.
ContentContainerBlock
JSS component is missing React implementation. See the developer console for more information.
ContentContainerBlock
JSS component is missing React implementation. See the developer console for more information.
Content Container - Full Width
This is Content Container with full width.
There is a problem with height when more than 4 cards are displayed, since there isn't dynamic Content Container hight spread to cover bottom row of cards under the more button.
Padding between CTA button for more episodes and next container.
Content Card without Link
Content card with link and CTA
Without Content Card link
Empty card
CC without image
Without Video
Content Container - Normal Width
Content Container with normal width.
1920px width - has a problem with spreading cards, they are small and the content isn't adjusted to the rest of the container. Font inside of cards should be smaller. div145 should be wider on bigger screens so the content can fit properly.
1280px width - Ok
768px width - CTA Button should have padding bottom.
400px width - Ok
When there isn't CTA and link, there is problem on smaller devices since user wouldn’t be able to figure out what should he/she do since hover isn't active on mobile and tablet devices.
Multi line content pushes the cards out of the background image as in this case.
Most problematic is 1280px and smaller screen width.
Content Card - fully populated
No link
Content Card - No videos
ContentContainerBlock
JSS component is missing React implementation. See the developer console for more information.
homepage HERo
Below is a Homepage Hero component. Component allows editor to add a large banner image with centre aligned Title (without option to chose size of the text), plus two CTAButtons.
It is possible to add images for different device sizes as a subcomponent of hero container.
A logo of fixed size can be added if required.
There is no problem when presented content is image, it fits great on all devices, different situation is when the content is video since it cut some parts. In this case I used random video, since I don't access to everything.
I've tested share button on Homepage hero and it breaks the page if I use different type of image than svg, didn't find any svg to test the button with it.
EXAMPLE 1 - FULL WIDTH
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
Container has image as background. Logo is image with centred position and fix dimensions. Two CTA buttons are added.
EXAMPLE 2 - FULL WIDTH video
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
Container has video as a background. Logo is image with centred position and fix dimensions. Two CTA buttons are added. It is possible not to use title, but SEO requires it.
EXAMPLE 3 - Normal WIDTH
Item added directly in the One Column Container with layout setting Normal Width.
Margins: none
Container has image as a background. Logo is image with centred position and fix dimensions. One CTA buttons is added. It is possible not to use title, but SEO requires it as a best practice, it's also possible not to use logo image or call to action.
EXAMPLE 4 - full WIDTH with forced narrow margin
Item added directly in the One Column Container with layout setting full Width with forced narrow margin.
Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;
Container has image as a background. Logo is image with centred position and fix dimensions. Two CTA buttons are added. It is possible not to use title, but SEO requires it as a best practice, it's also possible not to use logo image or call to action. In this case, content on bigger screens isn't useful.
Gallery
Below is a Gallery section. Component allows editor to add a responsive images with centre aligned Title (without option to chose size of the text), description of the component under the title.
It is possible to add redirection link to the gallery.
When 4 images are added to gallery and we chose 2 of them to be presented on webpage, there is empty clicking on thumbnail left and right arrow when we try to move between images, in this case image is showed on every other click, possible it is because of added images in CE.
Gallery 3 is created without thumbnail images and icons for opening the images is shown. When Gallery is opened there is possibly to move between images, but it has bug that it change image on every third click. Make thumbnails required field.
Gallery 4 is created without images, thumbnails are displayed but there is option to click to see image that is not added. Possibly disable option to open carousel when user create this type of gallery.
Gallery 1
Although Image field is required, it doesn't break the page if there is no image added.
Gallery with Settings: Landscape, full width, 4 columns, light, text align right.
Gallery 2
Gallery settings are:
 |
Thumbnail Aspect Ratio: landscape, 4 images presented,
Theme: dark,
normal container layout,
text aligned to the right.
|
All images have image and thumbnail fields defined.
When dark theme is chosen, title is white and since theme isn’t shown as dark, we can't see title.
Gallery is looking good on all devices, there isn't anything strange.
Gallery 3 - no thumbnail’s
Gallery settings are:
|
Thumbnail Aspect Ratio: landscape, 5 images presented,
Theme: dark,
normal container layout,
text aligned to the left.
|
Gallery doesn't have thumbnails defined.
Gallery 4 - no images
Gallery settings are:
|
Thumbnail Aspect Ratio: landscape, 4 images presented,
Theme: dark,
normal container layout,
text aligned to the right.
|
Gallery has thumbnail fields defined, but no images.
When dark theme is chosen, title is white and since theme isn’t shown as dark, we can't see title.
Gallery is looking good on all devices, there isn't anything strange.
Gallery 5 - normal width - square
Gallery 6 - full width with narrow margin
Media Block
Below is a Media block section. Component allows editor to add three image sizes. User can add Video with CTA buttons, and there are heading and description of the block.
Media block full width without images and video.
1920px is the break point of the content. On full width it place it in the middle and group content in the middle, looks like it has some big padding.
1280px, 768px and 400px have a full width of the content.
Media block normal width with large image.
1920px same as in full width of content layout. Other devices look good.
Media block fully populated and full width.
There isn't possibility to choose video and image in the same block, they overlap. When there is more than one image, something confusing is happening and it displays just one part of the single image.
Media block - video
Both full and normal width show small video placed in the middle on 1920, 1280. On 768 and 400px it looks good. There is some padding from top and bottom that adds too much space between video and content before and after it.
This is media block 1
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Media block 2 - normal
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
MEDIA text BLOCK
Below is a Media text block section. Component allows editor to add three image sizes. User can add Video with video button, CTA buttons and there are title field and description of the block.
In middle and small images, I've defined large image, it doesn't show images at all on the page.
Media text block example 1
Item added directly in the One Column Container with layout setting full Width.
Margins: none
Container is populated with description (dummy text), title and CTA button, at the right section is image with video button. Content looks good on all devices.
Aspect ratio: Landscape, full width.
Media text block
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
MEDIA TEXT BLOCK EXAMPLE 2
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
Container is populated with description (dummy text) and title. CTA button, image and video button are not defined. Content lefts great whitespace on smaller devices at the top, and on the bigger screens on the right.
Aspect ratio: Landscape, full width.
Media text block - text only
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
MEDIA TEXT BLOCK EXAMPLE 3
Item added directly in the One Column Container with layout setting Normal Width.
Margins: none
Container is populated with description (dummy text), title, CTA button and video button, image is not defined.
1920px added some padding to container. Image field needs to be required, since without image, content looks bad since it creates div for the image but there is nothing to display so it displays white background.
Aspect ratio: Square, normal width.
Media text block with small images
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
MEDIA TEXT BLOCK EXAMPLE 4
(Full width with narrowed margin)
Item added directly in the One Column Container with layout setting Full Width.
Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;
Container is populated with description (dummy text), title, and image. CTA and video buttons are not defined for this test case.
Margins have problematic behaviour just on bigger screens since the margin is too big.
Aspect ratio: Landscape, full width.
Media text block with margin
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
MEDIA TEXT BLOCK EXAMPLE 5
(FULLy populated)
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
Container is fully populated.
There is no problem with this container.
Aspect ratio: Landscape, full width.
Media text block full width and video
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
News Grid hero article
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
Below is a News Grid Hero Article section. Component allows editor to add news article that already exist and create CTA button to redirect visitor to that specific page.
If any specific news is chosen, it doesn't display it. Only thing page displays is main news page.
There is no difference between normal and full width Content layout.
On 1920px and wider text and CTA are not aligned with image, looks like they have some padding that shifts content to the centre.
When narrow margin is added, content doesn't react on it.
It is not important what is selected as an option to layout, does it have a margin or not, the output of the container is the same.
Product hero
Below is a Product hero section. Component allows editor to add responsive images, pre-title, Title, subtitle, Logo, CTA buttons and Video. It is possible to chose between title size (H1 or H2) depending on the place created.
Example 1 full width
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
In the example 1 fully populated container is created, accept Video. Container layer is full width. This way created container doesn't have any problem with displaying.
This will look good Main title
EXAMPLE 2 normal WIDTH
Item added directly in the One Column Container with layout setting Normal Width.
Margins: none
In the example 2 fully populated container is created with one CTA button. Video field isn't populated. Container layer is normal width. This way created container doesn't have any problem with displaying.
Pretitle that makes a difference Title of this great product
EXAMPLE 3 full WIDTH with narrow margin
Item added directly in the One Column Container with layout setting Full Width.
Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;
In the example 3 container is populated with one CTA button, pre-title, title and video. Container layer is full width with narrow margins added. This way created container doesn't have any problem with displaying on smaller devices, but look really bad on 1280 and 1920px screens.
Product Page Hero Full width with video
Vehicle options
Below is a Vehicle options block section. Component allows editor to add title, description, CTA buttons and specific options created as a child component to the vehicle options.
Single option that is necessary contains: Thumbnail, image, title and description. Glitch has found in this block:
When user adds 12 thumbnail images, it moves complete content and throws page out of the flow. My proposal is to make thumbnail layer with fixed width same as big photo above and add moving between thumbnail photos option.
Example 1 full width
Item added directly in the One Column Container with layout setting Full Width.
Margins: none
In this example container is populated with title, description and CTA on the left, and on the right are displayed options that are subcomponents of the option parent. Inside option, different description size and representation without all images is tested. There is small problem with margin of the container for the big screens since it looks like the margin is dynamic.
Vehicle options
Testing Vehicle options page with option inside it.
Vehicle option inside optionS
Non relevant images, just for testing.
Vehicle option without thumbnail image and long description
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Vehicle 2
Description for vehicle option 2
EXAMPLE 2 Normal WIDTH
Item added directly in the One Column Container with layout setting Normal Width.
Margins: none
In this example container is populated with long title and two CTA on the left, and on the right are displayed options that are subcomponents of the option parent. Inside option representation without all thumbnails is tested and what is happening when image number overcome the thumbnail size at the top. There is small problem with margin of the container for the big screens since it looks like the margin is dynamic.
Vehicle options - normal width
EXAMPLE 3 full WIDTH with narrow margin
Item added directly in the One Column Container with layout setting Full Width.
Margins:Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;
In this example container is populated with long title, description and two CTA on the left, and on the right are displayed options that are subcomponents of the option parent. Content on bigger screens isn't very clear.
Vehicle options - narrow margin
This is Vehicle options with narrow margin added to the full width container, containing one CTA button.
Vehicle option inside optionS
Non relevant images, just for testing.
Vehicle option without thumbnail image and long description
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Vehicle 2
Description for vehicle option 2
Testing Gallery
Parent component
Image gallery - Text is from component description!!
When image is not defined, there is a problem with placing items on the page, since (view) icon is present but out of the flow and it is confusing for the user to understand what is going on. Make image field require and show some error if user doesn’t define it, so he can understand what is the problem. Identical problem is with thumbnails, it should be required and if it isn't provided page should show some error.
Features icons are not structured well on mobile devices.
Good To Know
Warranties
BASE - 5 years or 100,000km, whichever comes first.*
Limited Paint Warranty - 3 years or 100,000KM, whichever comes first.*
Anti-Perforation Warranty - 12 Years**
Normal width layout
Gallery testing
Normal width - text is from components description!
Same problem as full width. Full and normal width looks same. On 1920px + screens content tends to be squeezed in the centre of page and font looks smaller than on 1280px screen.
Good To Know
Warranties
BASE - 5 years or 100,000km, whichever comes first.*
Limited Paint Warranty - 3 years or 100,000KM, whichever comes first.*
Anti-Perforation Warranty - 12 Years**
Info block with narrow margin
testign gallery