A gift for everyone.

Find the right Sonos for everyone on your list.

Learn more

Image fill left, call to action right

Design Constraints

The design constraints of this tout calls for a full-bleed background image with the call to action content on the right, while the busy part of the background image is more to the left. The minimum tout background image for large viewports should be 1605px x 560px. It's up to the team on how to implement the image resizing strategy.

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 background of the image should cover the available space. This might cause some pixelation, depending on the size of the background image.
  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

Once the viewport hits the medium breakpoint, the text content of the tout floats to right and its background color becomes transparent.

Large Viewport

The behavior for the large viewport is the same as the medium viewport, but with a larger image retrieved with Interchange.