Open Container

The Open Container component allows for the creation of a container on a page. A container is a device for adding components to a page.

Containers are often useful when grouping components together for the purpose of sizing them or providing a background behind the components in the container.

How it Works

The container is a layout device that allows for the grouping of components within a page. The use of containers allows for control in laying out the page.

All components must be put into a Layout Container component. Every page has at least one container component built-in to its template where components can be added. This container is called the Layout Container.

There are four kinds of container components available in AEM, the Layout Container, Open Container, Form Container, and Theme-able Container.

How to Use

Container Component

Within the layout containers, it is possible to add any an Open Container component. The most common uses for a container component within a page are:

Add background color or image
Group components to resize them together

Inside the dialog box for the Open Container component, you may configure the following options.

Layout

A container can be configured to be either Responsive or Simple.

The simple configuation will keep all components withing the container in the same location no matter the screen size.

The Responsive configuration will adjust the components to stack when viewed on a smaller screen.

Background color

You can choose the background color using a color sequence.

Background image

Upload an image to be used as the background.

This text is within an Open Container with a green background.

Last Modified on Dec 17, 2020