The container component allows us to create a container for multiple additional components on a page. The usage of the Container component is typically used to group and apply a common style of layout option. We recommend that you use Containers for everything. Containers are configurable and the layout width of a container can be changed by clicking on the layout icon.
Here is the layout icon, circled:
The configure dialog allows the content author to define the container item and how it will behave and appear for a visitor to the page.
Layout - This option defines the behavior or the layout behavior of the Container Component.
Simple - Defines a container as a simple collection of components
Responsive Grid - Defines a container as an AEM Responsive Layout
Background Color - Definable either as free-form RGB values or by using the color picker, depending on configuration
Background Image - Defines a background color or image for the container, depending on configuration
By default, no style is attached when you put a Container component on a page, we always recommend if you are using containers to create one with the “edge-to-edge” style, and then put another container inside of it with the style “Column Under Nav”
Below is an example of what it looks like when you put a container within a container. Visually on the page, iit looks like the Edge to Edge container is under the Column Under Nav container. To get the real view, look at the content tree on the left hand side of the image, you’ll notice that the first Container (V1) component is above the Column Under Nav container.
You can apply a certain look to an entire section of content. As an example, let’s make the edge-to-edge container have a background image/color. Watch what happens to everything underneath it. The image is applied to everything that lives within the container. In this example, only a “Column Under Nav” container, and a Teaser are under the main container.
©1994-2022 Cru. All Rights Reserved.
