Frames

Frames are special components for controlling the layout of other components. They usually exist at the body level, however certain frames and other special components allow for internal frames. Frames allow you to structure a row of components into percentage-based columns.

The following frames are available with the given width percentages:

  • 1 Column Frame: 100%
    1 column frame icon
  • 2 Column Frames with the following percentage splits:
    • 50% - 50%
    • 58% - 42% or 42% - 58%
    • 67% - 33% or 33% - 67%
      2 column frame icon
    • 75% - 25% or 25% - 75%
      2 column frame icon
  • 3 Column Frame: 33%
  • 4 Column Frame: 25%

Component properties

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
Decoration Controls:

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.