Start with one expand over time

You can start with one or two speakers and add more to other rooms over time. It's easy to combine different sonos speakers to come up with a customized solution to fit your home.

Image fill, call to action center(ish)

Design Constraints

The design constraints of this tout calls for a full-bleed background image with the call to action content center(ish) on the screen, depending on the viewport, while the busy part of the background image is centered as well. 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 aligns to the left, while the call to action button aligns right. background color becomes transparent.

Large Viewport

A larger image is retrieved with Interchange, but still centered. The call to action content is aligned to the right, but just past the center line of the tout.