Frames

A frame is a structural container component that can be used to adjust the layout of internal components on a page. Internal components must be added to frames in order to render to a page. The following frame sets are available for use in building page layouts:

One column: narrow and wide

Two column: 6-6, 3-9, 9-3, 4-8, 8-4, 5-7, 7-5

Three column: 4-4-4

Four column 3-3-3-3

NOTE: Highlight section components when used at the page level are frames and have specific rules that will apply. See below.

Frames must be used to add any internal components directly to a page.

Some frames have properties that can be adjusted depending on the needs of the page. These properties will be available in the component properties for all frame sets, but it is important to note that some of the properties do not apply to some frame sets. For example, two column frames can be reversed on mobile, but this does not apply to single column, 3 column, or 4 column frames.

Alignment and Orientation:

• Reverse Columns On Mobile - The second column should appear first on mobile when checked. This applies to 2 column frames only.
• Check to vertically center the content in columns. - This will affect all columns in the frame

Frames also have the ability to have a background “box style” decoration that can be added to a 6-6 frame set at the body-content level of the page. This background decoration has a set height and width that depends on the width of the page. The columns need to be reversed for mobile if the image is on the left so the frame decoration doesn't go behind the text. 

***This box-style decoration cannot be used on Colonial Life***

Controls:

• Checkbox: Show frame background decoration.
• Again, this is not designed to be used on Colonial Life pages.
• The frame decoration defaults to the bottom left of the frame
• Checkbox: Move the decoration to the bottom right of the frame.

Decoration Color Control:

• Allows the user to change the color of the background decoration.
• Standard color options available in Sitecore can be used for this background decoration feature

The frame background decoration is meant to be used for specific use cases. For example, the frame background decoration cannot be used behind text. This feature can be added behind the following elements:

• Cards
• Images
• HSC

The content behind the frame background decoration WILL NOT adjust to the background decoration’s color.

Vertical spacing:

The vertical spacing controls increase or decrease the amount of spacing at the top of the item being changed. Currently our standard spacing is 112px.

Spacing control options are:

• Extra Small – Mobile: 16px | Tablet: 24px | Desktop: 32px
• Small – Mobile: 24px | Tablet: 40px | Desktop: 48px
• Medium – Mobile: 32px | Tablet: 56px | Desktop: 64px
• Large – Mobile: 40px | Tablet: 72px | Desktop: 88px
• Extra Large – Desktop: 112px

Note: The spacing values listed in the dropdown in Sitecore, are the desktop spacing pixel values.

N/A

N/A

N/A

General rules:

By default, frames sit vertically flush with other frames. This means there will not be any applied top or bottom margin between frames. Any vertical spacing will come from internal components that are added to the frames.

When a frame is a sibling to another full width component, various spacing rules will be applied to the frame or to the full width component.

If the frame is directly preceded by a full width component, the frame receives a top margin for the screen sizes below:

- Desktop: 112px / 11.2 rem

- Tablet: 96px / 9.6 rem

- Mobile: 56px / 5.6 rem

If the frame is directly followed by a full width component, the full width component receives a top margin for the screen sizes below:

- Desktop: 112px / 11.2 rem

- Tablet: 96px / 9.6 rem

- Mobile: 56px / 5.6 rem

Note: When a frame directly follows a page header or breadcrumbs component the frame will receive a top margin of 48px only.

Two column frame rules:

The following rules apply to ALL two column frame sets:

- Desktop and Tablet: padding-right: 16px, padding-left: 16px

- Mobile: Stacked

Highlight section (HSC):

The Highlight section component, or HSC, is a one column frame with specific added padding and configurable options for theme and background color selections. 

The HSC can be used as a full width component at the page level. When used as a full width component the frame spacing rules above apply to the HSC.  Also, the following padding and margin are applied when using the HSC as a full width component:

Top padding:

- Desktop: 112px / 11.2rem

- Tablet: 96px / 9.6 rem

- Mobile: 56px / 5.6 rem

Bottom padding:

- Desktop: 112px / 11.2 rem

- Tablet: 96px / 9.6 rem

- Mobile: 56px / 5.6 rem