Gradient fill, call to action left, product image right
Design Constraints
The design constraints of this tout calls for a transparent background image with a vertical full bleed contained to the height of the tout. 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 should cover the available space. This might cause some pixelation, but is a better choice over introducing a lot of empty white space when the viewport is larger than 320px and smaller than the medium breakpoint.
- 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 left and its background color becomes transparent.
- The image of the tout moves to the right and its background position is no longer set to cover the available area. This allows the module to have more breathing room for the text content.
Large Viewport
The behavior for the large viewport is the same as the medium viewport, but with a larger image retrieved with Interchange.