Skip to main content

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.

Authoring

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

  • Select the right layout. Select responsive grid if you want components within the container to adjust size. Select simple if you want components to just stack on top of one another.

Configuring the Desktop tab

  • Drop in a background image if needed. Select the proper image placement.
  • Configure the background color as needed. Transparent by default.

Configuring the Mobile tab

  • Drop in a background image if needed. Select the proper image placement.
  • Configure the background color as needed. Transparent by default.

Configuring the Styles

  • 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.
  • Select full-width padding if you want the container to expand full-width but with padding on both sides.

Examples

Full Width (Default) - Background Colors

Desktop background color - #005180

Mobile background color - #CC0000

Max Width - Background Colors

Desktop background color - #CC0000

Mobile background color - #005180

Full Width With Padding - Background Colors

Desktop background color - #005180

Mobile background color - #CC0000

Full Width (Default) - Image Placement + Background colors

Vaccination image + #005180 Background color

Max Width - Image Placement + Background colors

Vaccination image + #CC0000 Background color

Full Width With Padding - Image Placement + Background colors

Vaccination image + #005180 Background color

Full Width (Default) - Image Background Color Mix

Vaccination image only

Max Width - Image Background Color Mix

#005180 Background color

Full Width With Padding - Image Background Color Mix

Vaccination image only

Troubleshooting

Known Issues, Quirks, & Tips

  • 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.