Intro copy: The top area that contains a consistent set of fields as a starting point.
Component area: The main area where you place components to build out your section.
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.
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.
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.
The display dialog allows the author to define design options that impact the overall content within the Content Container.
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.
.png)
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.
Refers to the alignment of the pretitle, title, description and CTAs. Choose either Center (default) or Left.
Choose from six title size options.
Use Heading size as the default size for your main section headings.
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.
Refers to the top and bottom padding of the component.
Defaults to 64px top and bottom (desktop)
Use the separator component before adding the elastic container and cards to achieve Category listing additional offering.
With non-shadow cards (aka copy block)
.png)
Four columns
Use the content container with grid container - halves for a single image. Otherwise, use the Features accordion for multiple images.
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.