Container
The container component allows for the creation of a container for multiple additional components on a page and can be used to group other components and apply a common style or layout. The container component is very similar to the content with background component, but is better utilized for layouts that are full width and need more variable padding.
When to use
- To create a common layout of grouped components
- To add border or background color to grouped components to highlight important information or actions on a page
- For layouts that need more variable padding
- For full width layouts
When not to use
- Avoid for layouts utilizing images that need to fit to the edge of the container and consider using content with background component instead
- Overuse of the component can overwhelm users and dilute the important information on a page
Anatomy

- Background color and border options:
- white background color
- bright blue 10% background color
- gray 2 background color
- off-white background color
- decorative solid border with white background
- decorative dashed border with white background
- optional left or right border
- Graphic: optional to include icon / illustration / image either side-by-side or stacked
- Corner radius: 0px, 12px
- Heading: there should always be a heading and use H2 or H3 and limit to a maximum of 2 lines
- Paragraph/Subhead text: additional text is optional
- Call to actions: call to actions are optional, there can also be multiple if needed
- Padding (vertical & horizontal): 10px, 20px, 30px, 40px
Demos & variations
Most often used is a container using a border or background color with the following AEM styles selected:
- 30px or 20px horizontal and vertical padding
- Default component bottom margin
- No last child bottom spacing
Below are the background color and border options, layout configurations and alignment options.
Bright blue 10% background
Use for higher priority content and calls to action.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Off-white background
Use as alternative to bright blue 10% background.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Gray 2 background
Use for supplemental or related content or calls to action.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Decorative solid border
Use for member content or calls to action.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Layout configurations
2 content blocks within single container
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
50 / 50
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
33 / 33 / 33
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
25 / 25 / 25 / 25
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vertical border
Optional left or right border to help separate 2 or more messages that are in-line with each other. The border is always hidden in mobile and has the option to also hide in tablet. Only difference between left or right is a personal style or authoring preference.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Stacked layout with graphic
Use for stacked layouts with icons and illustrations.

Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Side-by-side layout with graphic
Use for side-by-side layouts with images, icons and illustrations. Consider using banner for images that need to fully extend the height of the container.

Heading 2 - heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Alignment options
Content aligned to top
Content will be aligned to top by default.
Meet Henry

Special Needs Initiative marks 5 years of helping families with complex health care
A program is pairing families who are navigating a complex health journey with a personalized claims advisor. Hear why one mom calls it “a game changer.”
Content aligned to vertical center
Meet Henry

Special Needs Initiative marks 5 years of helping families with complex health care
A program is pairing families who are navigating a complex health journey with a personalized claims advisor. Hear why one mom calls it “a game changer.”
Additional layout configurations
There are additional column configurations if a container component is used within the column grid component.
Other container components in AEM
- Layout containers: these are built in at a root page template level and allow placement for general components
- Container for floating content: this is used to help create centered and side-by-side content in layouts
- Container for quick link card: only available in full width page templates, this allows placing quick link cards in a uniform way with the correct responsive spacing and behaviors
- Form containers: these are used to build forms using form components outside of AEM