Background Container

Layout Variant: C092

Content Type: Collection

Expected Use:

The C092 component is a background container, intended as a wrapper for other nested components and does not have any content elements of its own. The purpose is to provide a singular color container with texture to a block of components. C092 should be used instead of the background color configuration within individual components because the textured pattern with background color works across the entire group added to this container.

C092 component should allow editors to nest one or more components (max of 3-4 recommended) within it, enabling the nested components to be visually styled as a group OR offering additional styling options for a single nested component. 

There are a variety of configurations that can be done but the base make up of the C092 has:

• Gradient. 
  • If enabled, this allows display on the background with different overlay orientation options. 
  • Gradient Orientation. This display setting is controlled by the "gradientOverlay" local setting.  
    • Gradient orientation options are Top Left, Top Right, Bottom Left or Bottom Right.
    • The gradient is set at center point position from 10rem x 10rem to 10% x 10% from the given corner of origin.
    • The gradient is visually not as crisp as more components are in a container. The gradient is a percentage based on the height of the component.
    • If there are more components, it will stretch the area where it moves from 10% to 60% gradient so it is less visually sharp than those with one or two components. 
• Pattern Type.
  • The pattern can be blank (no pattern), corner or grid.
  • Pattern Orientation. This pertains only to the Corner pattern orientation. The Grid pattern has no orientation.
    • Corner pattern orientation options are Top Left, Top Right, Bottom Left or Bottom Right.
    • The Corner pattern orientation is also controlled by the "gradientOverlay" local setting when this is enabled. Refer to the building the component section on different property values and corresponding orientation. 
• Gradient Overlay. As noted above, both the Gradient and Corner Pattern display are controlled by the "gradientOverlay" property on the local setting. 
• Any one of the configurations above can be applied to any background color, and they can be applied individually or in a group. The only two that are required to be authored in conjunction are the Pattern ones. Refer to the table for the summary. 

Note: Some components may have custom specific styling that will not interact well with C092. For example, C019. This component has a fix white background color that spans almost 50% of the component. Even if C019 is used on C092, the white background will still be displayed. Only 50% of the component will change into the selected background color on C092. 

Building the Component:

In building C092, a Collection must be created and this will serve as the a shell or container for various components that the user would like to group. 

1.The Teaser Title, Teaser CTA Label, Teaser Header,  Pictures or Other Media and Item are not used in this component. CTAs are not used as it will come from the embedded links nested on the Teaser Text. 

2. Add the Teaser Text - This is the body copy of the collection. For C092, all components (content items) intended to be part of the container is required to be embedded on this section. Max of 3 to 4 components can be embedded via the following steps:

• If the component is already open on the Tab, right click and select "Show in Library", the component searched will be highlighted. 
• Once in the Library, right click on the desired component and click "Copy"
• Go back to the C092 Collection's Teaser Text and click on the "Paste Content" icon located below the Teaser Text, 6th icon from the right. 
• Then, go to the pasted component and click on any part once C092 Intro Information
• then hover on the control icons under the Teaser Text, click the "Create or edit a link to a content item" icon. This is the 9th icon from the left side.
• On the "Link Behavior", open the drop down, select "Show Embedded"' and then hit close.
• Repeat the process for the next 2 to 4 components, as applicable. 

3. Set the layout variant to "C092".

4. Go to the System Tab and set up the four (4) mandatory Local Settings. Below is the list of properties that must be defined: 

• "gradientToggle" - A String property that switches the gradient background to 🗹 enabled or ☐ disabled (default) state.  
  • A Boolean property that allows users to enable and disable the gradient background.
  • The Gradient property value defaults to function not enabled. When the box is ticked, it enables the gradient function. 

• "gradientOverlay" - A String property that modifies the orientation of the gradient background and/or the corner pattern orientation, if enabled. 
  • Pattern and Gradient can be overlayed. You can use both pattern (grid/corner) and gradient at the same time. 
  • For the orientation, only the gradient and corner are affected but not the grid option. Corner pattern and gradient orientation can be modified.
  • The property Values are as follows:
    • "default"           – Top/Left gradient   |   Lower/Left corner pattern 
    • "right"            – Top/Right gradient   |   Lower/Right corner pattern 
    • "invert-right"  – Bottom/Right gradient   |   Top/Right corner pattern 
    • "invert"          – Bottom/Left gradient   |   Top/Left corner pattern 
  • For Gradient and Corner Orientation Reference, here is the diagram: 
    

• "patternOverlay" - A String property that allows users to modify the background pattern. The property Values are:
  • "grid" - This turns on the "Grid Pattern" 
  • "corner" - this enables the "Corner Pattern"
  • blank (leave empty), if there is no desired pattern. 

• "bgColorState" - A String property that defines the background color of the collection. 
  • The standard way to modify the background color is to go to the Content Tab then to the Background Color section. Doing it this way, ensures also that the "bgColorState" gets auto updated upon background color selection except for the new Tertiary background color custom for C092. 
  • Note that if the "Legacy (Gray)" background color is selected, not only that the "bgColorState" gets updated but also enables the "backgroundToggle" property on the Local Settings. This "backgroundToggle" is a Boolean property shortcut to enable or disable only the Legacy (Gray) background color. 
  • Below are the standard background color options to chose from via the Background Color on the Content Tab and its equivalent value on the "bgColorState" ": 
    • "Default" - (White). The "bgColorSate" value should be blank. 
    • "Legacy (Gray) - (Gray).  The "bgColorSate" value that will be auto displayed is "gray-background".
    • "Primary Background Color" - (Navy)
      • Brand 1 (Navy). The text color value for eyebrow labels that displays against this background should be updated globally to Cyan color. 
      • The "bgColorSate" value that will be auto displayed is "brand-primary-background".
    • "Secondary Background Color" - Black 
      • Brand 2 (Black). The text color value for eyebrow labels that display against this background should be updated globally to Cyan color.
      • The "bgColorSate" value that will be auto displayed is "brand-secondary-background".
    • "Accent Background Color" - Gray Alt
      • For C092, the Accent Background Color has been changed from very light shade of Cyan to Gray Alt. 
      • The text color value for eyebrow labels that display against this background should be updated globally to Blue color.
      • The "bgColorSate" value that will be auto displayed is "brand-accent-background". 
    • "Tertiary Background Color" - Violet 
      • Brand 3 (Violet) – new background color value. The text color value for eyebrow labels that display against this background should be updated globally to Orange.
      • This new "Tertiary Background Color" (Violet) can be used for C092 component only. It is not part of the standard Background Colors on the Content tab. When this "Tertiary Background Color" is defined as value on the "bgColorState", all components embedded on the Teaser Text of the C092 Collection display the violet background color. 
      • To use the new "Tertiary Background Color", the user needs to follow these steps:
        • Go to the C092 Collection's Local Settings under the System Tab.
        • Edit the value of the "bgColorState" and enter "brand-tertiary-background". This will override the previously set value and the violet background color will be displayed. Specific to C092 component only, when the "tertiary-background-color" is set, the optional eyebrow or mini-descriptor color also changes to Orange font color. 
        • Save the edit. 

Background Color and Eyebrow label summary

For detailed samples, please visit the C092 Regression Page. Regression samples include a C092 with one component and 2 to 4 components with background modifications, grid combinations and pattern combinations. The C092 introduction provides a quick view on the local settings, possible combinations for C092 and reminders.