Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Container Component

    The Container serves as a versatile tool within the AEM ecosystem, allowing content authors to seamlessly integrate and organize various pieces of content and components within a unified, structured Container. The Container can also be used to add background color behind components, to stretch content either full width or to the center of the page, and to add a border radius (rounded edges) around a collection of components.

    Overview

    Component name: Container

    Authors who can use: any

    Templates/page types that can use component: root Containers are required on all templates; additional Containers are optional

    • Root Containers which are baked in to templates include:
      • Hero section Container
      • Main content Container
      • Bottom content Container (full width)
    • Additional Containers may b eoptionally added 

    Required or optional: required on some templates; otherwise optional

    Authoring Fields

    Adding the Container component to the page

    1. All pages already have Containers baked-in to the template.

    2. If additional Containers are needded:

    a. Once on the desired page in Edit mode, add the Container component by doing the following:

    i. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Container” in the search bar or scroll to Container in the list. Double click to add to page.

    ii. Option 2- on the left handrail, navigate to the Components tab. Type “Container” in the search bar, or scroll to Container in the list. Double click to add to page.

    Editing the Container component

    1. With the edit wrench, open the component.

    Container toolbar, featuring the wrench icon

    2. Properties tab

    a. Layout dropdown: Authors need not change the selection.

    b. Background Image selection: The author has the ability to author a background image within the container. The author should limit the use of the background image in the Container component.

    c. Label field: Authors need not add a label.

    d. Role field: Authors need not add a role.

    3. Styles tab

    a. Container Background Width dropdown: Select None or Component Container. Default None.

    i. Component Container option should be selected if padding if the author is grouping components together, or doesn’t want the background to stretch across the entire page.

    b. Container Background Color dropdown: The colors are used to show prominence of the content across the UI. Select None if a background is not required. Default None.

    i. Note that selected colors are also not tied to the name of the color. For example, Surface Container High displays as a light blue, but is not referred to as light blue. This is done because the colors are set as color tokens, so if they need to be updated in the future they can be changed with one simple switch of the color token.

    c. Container Border dropdown: Select Container Border Radius for the container to have a rounded border. Default None.

    d. Padding Top/Bottom dropdown: If the Container needs extra padding to separate it from other components, make a selection. Choose between None, Top, Bottom, or Top and Bottom. Default None.

    e. Padding Left/Right dropdown: If the Container needs extra padding to separate it from other components, make a selection. Choose between None, Right, Left, or Left and Right. Default None.

    Container authoring dialog's Styles tab, including: background width, color, border, and padding
    Display of background colors for container

    Sample Containers

    Root Containers: Hero Container and body content Container. Figure A: Two root Containers: the Hero Container and the body content Container.
    Root Containers: body content Container and bottom section full width Container. Figure B: Two root Containers: the body content Container and the bottom section full width Container.

    Accessibility

    1. When a Container is added to the page, the component name is “Container.” When a Container is already baked into the page, the component name is “Container [Root].” Both can be edited the same way.

    Other Tips

    1. Use the Content Tree from the side toggle to view all components grouped by Container. Click the edit wrench on each item to jump to that component and open its authoring dialog.
    2. On the Homepage, PA Gov Content, and Search Results page templates, the root Containers are set at full width. To edit, select the Styles tab in the authoring dialog, and change Container Background Width from None to Component Container.
    3. On the other Agency Content, Agency News Article, and Service Detail page templates, the root Contianers vary in width. In the main body content section, the root is set at Component Container width (centered on the page). In the bottom content section, the root is set at None (full width). Both may be edited as described above.
    Content Tree from the lefthand side side toggle, listing all components and Containers on the page.