"Foreground Layer" Tab

"Image/Video with Single Overlay" Component

"Background Layer" Tab

Background:

If Image selected above:

(Select image from DAM)

If Looping Video selected above:

(Set Brightcove Video ID and any other associated configurations)

"Layout & Design" Tab

Desktop Height:

Mobile Layout:

<-- Foreground layer sits on top of the background image. This option is NOT AVAILABLE when Looping Video is selected above

Positioning of the foreground layer is inherited from the desktop position, and is NOT authorable

Mobile/tablet height should always be 80% Viewport Height (this is our best guess, the value could change, which should take into account the height of the top nav and alert bar.

NOTES:

All selections displayed as radio buttons for communication purposes only. Can change to drop-downs if authoring wants.

Default values to be determined by authoring.

The UX team would like to experiment with switching from the "desktop" layout to the "mobile" layout at some point in between 768px and 1280px.

<-- When either Stacked option is selected, Foreground Layer assumes background color from Color Scheme, regardless of whether or not the Desktop Transparency indicator is selected.

Additionally, height is driven by the height of the Backgrou Layer + the height of the Foreground Layer (which is determined by the sub-omponents/content placed in it).

Color Scheme:

<-- #242424 (Bose black) text, #f8f8f8 (Bose white) background

Desktop Width:

<-- Height will be automatic based on the sub-components/content contained within.

Desktop Position:

Desktop Transparency:

<-- If selected, foreground layer takes on a transparent background on desktop, and also on tablet and mobile when Layered Mobile Layout is selected.

Content Alignment:

<-- Alignment is applied to all sub-components/content pulled into the layer

Background Image Focal Point:

<-- Used to determine the cropping approach for Layered mobile layouts, and also when the minimum height of a panel forces it to be a different aspect ratio than the asset placed in the Background Layer.

Use the same 5 focal points that we use today.

Examples:

Dark text on light background

Light text on dark background

Examples:

Layered

(top alignment inherited)

Layered

(center alignment inherited)

Layered

(right alignment inherited)

Stacked

(foreground on top)

Stacked

(background on top)

Examples:

Examples:

Examples:

Transparency OFF

Transparency ON

Examples:

Left

Center

Right

<-- First 3 "Top" selections automatically translate to "Top" alignment in a Layered Mobile layout.

This will NOT be an authorable selection.

Desktop panel height will be determined by the width/height aspect ratio of the image/video asset placed in the Background Layer.

Minimum panel height will be determined by the height of the content contained in the Foreground Layer. If the minimum panel height forces the panel to be a different aspect ratio than the original background asset, the asset will crop based on the focal point selection

TBD if we need a maximum height added to this as well.

Examples:

1280px

640px

550px

1000px

550px

Standard aspect ratio

Aspect ratio skewed by minimum panel height

<-- #f8f8f8 (Bose white) text, #242424 (Bose black) background

<-- Next 3 "Center" selections automatically translate to "Center" alignment in a Layered Mobile layout.

<-- Final 3 "Bottom" selections automatically translate to "Bottom" alignment in a Layered Mobile layout.