Muse Home Foundations Components Patterns Templates Resources Support

Content Container

The Content Container is an AEM component that serves as a consistent starting point for creating content patterns and recipes. It offers standardized fields and layout options to cater to various pattern foundations.

Anatomy

Content Container Anatomy

Intro copy: The top area that contains a consistent set of fields as a starting point.

  • Pretitle (optional)
  • Title (optional)
  • Description (optional)
  • Call-to-action (CTA) (optional): Can be placed above or below the component area.

Component area: The main area where you place components to build out your section.

Usage

The Content Container is a versatile layout wrapper that brings consistency and flexibility to your pages. It includes optional intro text at the top, a Component Area for adding any supported AEM Components, and built in spacing and layout rules that match the design system. 

Use the Content Container when you need to group content together in a consistent way—whether it's a standalone section, part of a longer page, or a flexible block within a pattern. It's great for situations where you want more control over layout without needing a fully custom design. Think of it as your go-to building block for structured but flexible content. 

Use cases

As a starting point for new patterns: Content container offers a consistent and structured approach to building new content patterns within our system.

If customization is needed: The page or section requires variations not supported by existing patterns.

If flexibility is required: When the layout or content may need to be expanded or modified in the future, potentially making existing patterns less suitable.

For basic text content: To display basic text content without the need for complex layouts or additional components. It can function as a standalone section such as section intro.

What is the Component Area?

The Component Area is a flexible content slot that allows you to nest other AEM components inside it. It's designed to be both simple and powerful—perfect for everything from basic layouts to more robust, nested structures. Whether you're stacking a few text and images blocks or building out a complex section with multiple components, the Component Area adapts to your needs.

This area helps create modular, reusable layouts while staying aligned with the design system. Use it to customize patterns, extend functionality, or build dynamic content areas—all without needing to touch code. 

Recommended Component Area components:
  • Accordion
  • Button
  • Brightcove (video)
  • Card
  • Container-Grid 
  • Container-Elastic 
  • Image
  • Separator
  • Table
  • Title
  • Text

Display Settings 

The display dialog allows the author to define design options that impact the overall content within the Content Container.

Inset

Determines the content width using a 12-column grid and centers it on the page. Options include:

Inset 0 (default): Content spans the full 12 columns (full width). Use this for sections that need maximum width without extra padding. Ideal for highly structured layouts and the preferred approach for when a left-aligned headline is in use.

Inset 0 is recommended for most cases because it maintains uniformity and avoids unintended spacing.

Inset 1: Content shifts inward by 1 column on each side, spanning 10 columns. Ideal for smaller layouts, enhancing readability and visual flow.

If you use Inset 1 (or 2) for left alignment, the intro copy will align to the left, while centering the content on the screen.

Inset 2: Content shifts inward by 2 columns on each side, spanning 8 columns. Best for content sections that need better readability (such as a long-form text content) or visual flow within a page.

Alignment

Refers to the alignment of the pretitle, title, description and CTAs. Choose either Center (default) or Left.

Title size

Choose from six title size options.

  • Display
  • Display reduced
  • Heading (default)
  • Heading reduced
  • Title
  • Title reduced

Use Heading size as the default size for your main section headings.

Theme

Choose from Light (default), Grey, or Dark backgrounds.

Light is most commonly used, while grey and dark themes should be used intentionally to achieve specific design aesthetic or highlight content.

Component padding

Refers to the top and bottom padding of the component.

Defaults to 64px top and bottom (desktop)

Examples

Section intro

  • Use the content container as an introduction for a section of patterns or as a standalone simple text section.
  • The example below uses content container with “Superior protection…” as the intro copy and three spotlights dropped inside it.

With Accordion

  • Commonly used for frequently asked questions.
  • Best used with Inset 1 or 2.

Elastic container layouts

Two columns

With non-shadow cards (aka copy block)

Use the separator component before adding the elastic container and cards to achieve Category listing additional offering.

Three columns

With shadow cards

With non-shadow cards (aka copy block)

Four columns

Grid container layouts

Grid-Halves

With accordion and image component

Use the content container with grid container - halves for a single image. Otherwise, use the Features accordion for multiple images.

Grid-Third-Two Thirds

With accordion and image component

The Third-Two thirds grid can be used to display larger size images.

Use the content container with a grid to display a larger single image. The Features accordion doesn’t support this layout or single image behavior.