• Use Cases: The AWT Container is a flexible layout wrapper used to structure page content, apply themes, control spacing, and organize nested components. It is the backbone of many page layouts, enabling editors to build responsive multi‑column structures without custom development.
• Dependencies
  • None required. The General Container is fully self‑contained and can wrap any other component. Optional nested containers can be added to create multi‑column layouts.

• Background Image: Allows setting a background image for the container. Overrides background color if both are set.
• Background Color: Select a predefined color when no background image is used.
• Badge Image: Optional small logo or badge displayed inside the container (top right corner).
• Anchor: Adds an internal page anchor (ID). Must be unique per page.
• Theme: Applies a predefined theme that propagates styling to all inner components. (Does not work - needs code inspection)
• Container Size: Restricts the container width to a specific pixel value
• Nested Containers Layout: Supports up to 4 columns using Desktop, Tablet, and Mobile relative width fields
• Responsive Column Control: Separate width settings for Desktop, Tablet and Mobile (If Tablet/Mobile values are empty, they inherit from the larger breakpoint.)
• Inner Spacing (Gaps): Horizontal and vertical spacing between nested containers for Desktop, Tablet and Mobile (If Tablet/Mobile values are empty, they inherit from the larger breakpoint.)
• Content Alignment: Controls how inner content is aligned (Vertical alignment, Horizontal alignment, Top padding, Bottom padding)
• Nested Containers: Containers can contain other containers (and other components), enabling complex layouts

Controls how much horizontal space each nested container occupies on desktop.

If left empty, inherits Desktop values.

If left empty, inherits Tablet values.

Defines spacing between nested containers

If left empty, inherits Desktop values.

If left empty, inherits Tablet values.

Create the following folders (names must match exactly):
General Containers Settings Folder

• Horizontal Alignments Folder
• Vertical Alignments Folder
• Background Positions Folder
• Background Fits Folder
• Background Colors Folder

Inside each folder, create items with a Value field that defines the CSS class or alignment keyword.
Horizontal Alignments Folder Examples:

• Center
• Left
• Right
• Stretch

Vertical Alignments Folder

• Top
• Center
• Bottom
• Stretch

Background Positions Folder

• Left
• Center
• Right
• Top
• Bottom

Background Fits Folder

• Cover
• Fill
• Contain

Background Fits Folder Add all required color items (e.g., White, Blue, Yellow, Purple, etc.).

Add AwtContainer to any of these page placeholders: awt-top, awt-body, or awt-bottom (also inside some other components like the AWT Standfirst Article - awt-paragraph placeholder).

Each container rendering must have a data source item of type General Container (under your “General Containers” folder in Page Content). Create as many data source items as you need—one per container instance.
Pathing (example):

• Templates: /sitecore/templates/Feature/AlexionWebToolkit/Content Types/GeneralContainer/GeneralContainer

When you drop AwtContainer on the page, select the appropriate General Container data source item.

Use the Data and Background sections to control the container’s look and the default styling applied to its inner components.

• Badge Image: Optional transparent logo badge rendered within the container.
• Theme: Choose a theme (e.g., Koselugo, Neuro Connect, Ultomiris) to propagate consistent styles to all inner components. If left empty, default AWT styles apply. (Themes are managed in the “Themes” folder within Component Settings.)
• Container Size (px): Restrict the container’s max width (positive integer in pixels).
• Background Image / Color: Set either a background image or a color. Note: Color does not apply if a background image is selected. Use Background Fit (cover, contain, fill) and Background Position (left, right, center, top/start, bottom/end) to control image behavior.

Tip: Give different containers distinctive Background Color or Background Image to make authoring easier (you’ll more easily distinguish columns while building complex layouts).

AWT Container supports up to 4 columns per breakpoint. Configure Relative Width fields (percent values) per device group. If all fields are left blank, the container renders as single column (100%) for that breakpoint.

• Desktop Column Sizes (percents): First, Second, Third, Fourth Desktop Relative Width.
  • Sum must be > 0 and < 100. If the sum is < 100, leftover horizontal space remains unoccupied.
• Tablet Column Sizes (percents): If blank, inherits Desktop settings. Same rules on sum and order.
• Mobile Column Sizes (percents): If blank, inherits Tablet settings. Same rules on sum and order.
• Order matters: The nth nested container on the page maps to the nth Relative Width field (e.g., the 3rd nested container uses Third Relative Width).

Spacing is controlled via Gaps (pixels) fields per device group.

• Desktop Gaps: Desktop Column (horizontal), Desktop Row (vertical).
• Tablet Gaps: If blank, inherits Desktop gaps.
• Mobile Gaps: If blank, inherits Tablet gaps.

All values are positive integers (pixels).

Use Blocks Alignment and Padding to control inner content alignment and vertical spacing. Defaults are center alignment for both axes.

• Horizontal: left/start, center, right/end, stretch.
• Vertical: top/start, center, bottom/end, stretch.
• Top / Bottom Padding: Add vertical padding (pixels) above/below the inner content.

• Add AwtContainer to a placeholder (awt-top, awt-body, or awt-bottom) and select the data source you just configured (with your Desktop/Tablet/Mobile percentages).
• Inside that AWT Container, add nested containers (each with its own data source) to the awt-container placeholder. The number and order of nested containers must match the Relative Width fields you set.
• Add your content components into the placeholders of each nested container (e.g., left/right columns, third column, etc.).

Example: Two-column layout (50/50 or 66/33)

• On the parent container’s data source, set Desktop Column Sizes to two values (e.g., 50 and 50, or 66 and 33).
• Add two nested containers within the parent’s awt-container placeholder—each with its own data source.
• Now add content into each column’s placeholder.

Example: Three columns with a merged area (e.g., first column 100%, then split below into 66/33)

• Start with a parent container that has two Desktop widths 66 and 33.
• Place a content component in the first (66%) column, then nest a new container beneath it.
• In that nested container’s data source, set Desktop widths to 33 and 33 (or another combo) to create the split. Add content into the two inner columns.

You can make a container linkable via an anchor:

1. On the AwtContainer datasource, find the and set the Anchor field to a unique string (per page), and save.
2. In any link field elsewhere on the page, choose Insert anchor and enter the anchor path as: /{path-from-site-root}/#anchor-name (e.g., /en/products/#faq)
3. Use that same href anywhere to jump directly to the container.

Do

• Keep Desktop/Tablet/Mobile width sums > 0 and < 100; ensure the number of nested containers matches the number of non‑empty width fields.
• Use Gaps fields for spacing; Divider is not supported inside AWT Container.

Don’t

• Don’t expect Background Color to show when a Background Image is set (image takes precedence).
• Don’t reuse the same Anchor name on one page. Each must be unique.

• Columns misaligned or missing: Verify that the number/order of nested containers equals the Relative Width fields you filled. Check that the sum of widths respects the rules (> 0, < 100).
• No spacing between columns: Ensure Desktop/Tablet/Mobile Gaps are set appropriately (inheritance applies when left blank).

• Cards Container: AWT Container designed only for AWT Card components like Illustration Cards, Category Cards, etc.

1. Requires Inner Content to Render
   The container will not be visible unless at least one component is placed inside it. Empty containers do not display on the page.
2. Nested Containers in Multi-Column Layouts
   Placing an AWT Container inside another container configured with two columns can be cumbersome. The recommended workaround is to initially insert two placeholder components in the columns, then replace them one by one with the AWT Container. This approach ensures proper alignment and avoids layout issues.
3. No Left or Right Padding at Container Level
   Horizontal padding cannot be applied directly to the AWT Container. Any left or right spacing must be managed within the individual components placed inside the container.