Use Design Styles and Background Colors Within Components

Changing Background Colors on Components

In order to retain content as much as possible, backgrounds require a few extra steps in 2.0. The large majority of components follow this behavior, but some full screen components (such as media features or captioned media) may have different options.

Using White or Light Gray (On Light) Options

Change the fill at the component level

Components are built for white backgrounds by default.

Using the swatch listed in the “Backgrounds” section of the color library, simply set the fill to “Light Gray”. Color swatches outside of this folder are not available as background colors.

Using Maroon or Charcoal (On Dark) Options

Set the container property “On Dark” to true

Containers are usually a level down, under the component level. Many components, especially those with a section intro, will have multiple containers.

Be sure to set them all to “On Dark”.

Note: Some components may have a partial at this level, such as a featured card.

Change the fill at the component level

Use the background colors listed in the “Backgrounds” section of the color library. Color swatches outside of this folder are not available as background colors.

Using a Section Divider

Set component “Background” component to “Divider” option

By default, components are set to “solid fill”. Selecting the “Divider” option will display a section divider at the top of the component.

Don’t change the fill

Components with a divider must only have a background fill of “white” and cannot be combined with other background colors.