Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Container

Description

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