Agencies
Services
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