Gradient fill, product image left, call to action right
Design Constraints
The design constraints of this tout calls for a transparent background image without a full vertical bleed in this case, however the bleed behavior can be added for images that bleed to the edge on both the top and bottom of the image. An example of this is in Layered Right. This background image is layered on top of a background color or gradient.
This tout supports Interchange, which means we can set different image sizes for different viewports. We can do this via HTML (which is great for SiteCore) and still be used as a CSS background.
Done Criteria
Small Viewport
- The background of the image does not cover the available space, but rather is contained because it's not a full vertical bleed. This introduces some white space when the viewport is larger than 320px and smaller than the medium breakpoint. A small corner-case, but be aware.
- The text content of the tout should have a a black background with white text and placed below the background image of the tout. Text and buttons should be left-aligned.
Medium Viewport
- Once the viewport hits the medium breakpoint, the text content of the tout floats to right and its background color becomes transparent.
- The image of the tout moves to the left and should not clip on the left, but this is the fault of the image in this case, not the code.
Large Viewport
The behavior for the large viewport is the same as the medium viewport, but with a larger image retrieved with Interchange.