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

  1. 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 
  2. Graphic: optional to include icon / illustration / image either side-by-side or stacked
  3. Corner radius: 0px, 12px
  4. Heading: there should always be a heading and use H2 or H3 and limit to a maximum of 2 lines
  5. Paragraph/Subhead text: additional text is optional
  6. Call to actions: call to actions are optional, there can also be multiple if needed
  7. 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