Gradient fill, product image middle, call to action position based on viewport
Design Constraints
The design constraints of this tout calls for a transparent image positioned in the middle of the tout and flushed to the bottom edge. It has a gradient background layer with a call to action that changes positions based on viewport size.
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 product image does not cover the available space, but takes up 95% of the available width. The height is automatically adjusted. The product image sits flush to the bottom of the tout container and is centered horizontally.
- 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 is absolutely positioned above the product image, with the text content aligning to the left (horizontally aligned with the Sonos icon) and the call to action aligning to the right (horizontally aligned with the menu icon).
- The image of the tout stays centered in the middle of the tout, taking up 75% of the available width. The height is automatically adjusted.
Large Viewport
- The product image remains the same in size and positioning.
- The text content is grouped together in a normal fashion and placed in the top-right area of the tout. Actual placement is arbitrary.