c092-regression-page-ceg

C092 Background Container

This Regression page illustrates the setup of the C092 component using one (1) component only to provide authors better visuals on the gradient, pattern types, gradient and pattern orientation and background colors combinations.

The Regression Pages listed on the VN002 below this info page show various detailed C092 use cases for background colors, corner pattern and grid pattern using the max 3 to 4 recommended number of embedded component and were visually styled as a group OR with additional styling options.

Remember that C092 has no components of its own and that nothing is used in C092 except for the Teaser Text where you need to add the collections that will be part of the C092 Collection. Authors must ensure to set the link behavior to "Show as Embedded", set the Layout Variant to "C092" and add the following Local Settings under the System Tab:

Property Name	gradientToggle	gradientOverlay	patternOverlay	bgColorState
Purpose	Turns on /off the gradient display	Controls the orientation of the Gradient and Corner pattern display	Allows selection of pattern type	Sets the Background Color on the Content Tab except for the new tertiary background color which is manually entered on the local settings.
Property Type	Boolean	String	String	String
Values per property	🗹 (enable) ☐ (disable)	default Top/Left gradient \| Lower/Left corner pattern display right Top/Right gradient \| Lower/Right corner pattern display Invert-Right Bottom/Right gradient \| Top/Right corner pattern display Invert Bottom/Left gradient \| Top/Left corner pattern display	blank (left empty) corner grid	Blank (empty) brand-gray-background brand-primary-background brand-secondary-background brand-accent-background brand-tertiary-background

Below are the different combinations to display C092 component:

patternOverlay	gradientToggle	gradientOverlay	bgColorState
blank (leave empty)	🗹 (enable)	Yes; Any gradient orientation	Yes; Any background
blank (leave empty)	☐ (disable)	Do not add this property on the local setting	Yes; Any background
corner	🗹 (enable)	Yes; Any gradient and corner pattern orientation	Yes; Any background
corner	☐ (disable)	Yes; Any corner pattern orientation	Yes; Any background
grid	🗹 (enable)	Yes; Any gradient orientation	Yes; Any background
grid	☐ (disable)	Do not add this property on the local setting	Yes; Any background

Reminders:

The use of light background colors like Legacy (Gray) or Accent Background Color may not clearly display the gradient orientation or grid pattern.
Only for C092, the new Tertiary Background Color has violet background color and the eyebrow label (mini-descriptor) color is orange.
The gradient is visually not as crisp as more components are in a container as it is a percentage based on the height of the component. More components stretches the area from 10% to 60% gradient so it is less visually sharp than those with one or two components. Ideal to limit the number of components on C092.
The 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 the container.

C092 Regression Pages

C092 General Samples

Exhibits samples with different background color combinations

C092 with Corner Samples

Provides samples with or without gradient, gradient overlay types, corner pattern and different background combinations

C092 with Grid Samples

Showcases samples with or without gradient, grid pattern and different background combinations

⮟⮟⮟ Notes: C092 - P007 Gradient toggle ON, DEFAULT gradient overlay, CORNER pattern and primary background color ⮟⮟⮟

⮟⮟⮟ Notes: C092 - P007 Gradient Toggle ON, RIGHT gradient overlay, CORNER pattern and primary background color ⮟⮟⮟

⮟⮟⮟ Notes: C092 - P007 Gradient toggle ON, INVERT-RIGHT gradient overlay, CORNER pattern and primary background color ⮟⮟⮟

⮟⮟⮟ Notes: C092 - P007 Gradient toggle ON, INVERT gradient overlay, CORNER pattern and primary background color. ⮟⮟⮟

⮟⮟⮟ Notes: C092 - C025 Gradient toggle OFF, DEFAULT gradient overlay, CORNER pattern and secondary background color ⮟⮟⮟