Container

Container is a component for grouping components together for the purpose of sizing them or providing a background behind the components in the container.

The most common uses for a Container component within a page are to add background color or image, and group components to resize them together.

Configuring the Properties tab

• Layout: Responsive Grid is the default, used to ensure components within the container layout and adjust to the size of the container. Select Simple if you want components to just stack on top of one another.

Configuring the Desktop tab

• Desktop Background Image: Drop in or select a background image, if needed. For Desktop views only.
• Disable Dynamic Media for Desktop: When checked, disables Dynamic Media on Desktop views. This forces images to display in full, without any image modifiers or gradients applied.
• Desktop Dynamic Media Preset: Desktop mode always uses ContainerDesktop.
• Image Modifiers: Set image modifiers for dynamic media to process onto the Desktop image. For a full list of available modifiers, see the Adobe Experience League Command Reference page.
  • IE: For Opacity at 50% and a constrained fit, enter "opac=50&fit=constrain"
• Desktop Horizontal Image Placement: Select from either Left, Center, or Right alignment options.
• Desktop Vertical Image Placement: Select from either Top, Center, or Bottom alignment options.
• Desktop Background Color: Configure the background color as needed. Transparent by default. Images set will overlay on top of the background color.
• Desktop Height: Specify a custom, hard-coded height for the container in Desktop view instead of letting it dynamically expand as components are added. Setting this will cause author environment-specific visual overlaps.
• Gradient: Used to apply a gradient to a background image set on the Container. None by default. Users may select from Left to Right, Right to Left, and Left and Right Edge.
  • Note that the Gradient is applied to a background image called from Dynamic Media. Gradients will not display if Dynamic Media is disabled or if an Image is not set.
• Gradient Color (default white): Select a color for the set Gradient, if needed.
  • Note that at this time, using a color with transparency (IE: rgba) will cause the image to not display. Please use a hex color code (IE: #12AB56).

Configuring the Mobile tab

• The Mobile tab has the exact same options as the Desktop tab, specific to Mobile viewports. Please see the section above, Configuring the Desktop tab for a full list of options that may also be set for Mobile.

Configuring the Styles

• Width: Select a container style based on your needs. By default a Container will expand full-width to the edge of the Container it is in.
  • Select Max Width if you want the container to be max 2000px wide. This is used to center the container element to the area it is within.
  • Select Full Width With Padding if you want the container to expand full-width but with padding on both sides.

Vaccination image + #005180 Background color

Vaccination image + #CC0000 Background color

Vaccination image + #005180 Background color

Vaccination image only

Vaccination image only

• When resizing Containers, ensure to use the blue handle on the right side of the component. When adjusting the positioning of a container on it's current row, then use the left side blue dot/handle when resizing the component.
• Left-hand Navigation pages get 9 default columns for a container. If the user puts another fullsize container within that container, and the parent container hasn't had it's width adjusted (IE: it is freshly-inserted), you can resize the child container to 12 columns. Users sometimes run into issues where 1 page has a nested container on one side but not another, causing alignment issues with child components.