A gift for everyone.

Find the right Sonos for everyone on your list.

Learn more

Dark fill, product image middle, call to action aligned left with product image


Design Constraints

The design constraints of this tout calls for a transparent image positioned in the middle of the tout with the call to action text positioned beneath it. The behavior for this module is absolutely consistent through the small and medium viewports. However, when this module hits the large viewport, we have some variations. The content can keep the behavior it inherited from the small and medium viewports or the the content can be aligned side-by-side, with classes to switch the image to left and content to the right and vice-versa.

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

  1. The product image does not cover the available space, but takes up 100% of the available width; however, the available width is reduced to keep the elements balanced in the viewable area. The height is automatically adjusted. The product image sits on top of the call to action text and as the viewport expands, both the product image and call to action should center while staying roughly left-aligned.
  2. 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

  1. Once the viewport hits the medium breakpoint, the behavior doesn't really change, but widths and heights are adjusted for both the product image and call to action text to take advantage of the increased space of the viewport.

Large Viewport

  1. Once the viewport hits the large breakpoint, the behavior doesn't really change, but widths and heights are adjusted for both the product image and call to action text to take advantage of the increased space of the viewport. However, we have special classes to change that behavior.
  2. In the large viewport, we have two variations. Instead of the product image sitting on top of the call to action text, we can have these two elements sit side by side, with the options to choose which side to put the product image and which side to put the call to action text.
  3. View Layered Middle Left

    In large viewports, the product image aligns to the left and the call to action floats right.

  4. View Layered Middle Right

    In large viewports, the call to action aligns to the left and the product image floats right.