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. 
    AEM Components

    Container Component

    The Container serves as a versatile tool within the AEM ecosystem, allowing authors to organize 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 be optionally added 

    Required or optional: root required on all templates; additional optional

    Authoring Fields

    Adding the Container component to the page

    1. All pages already have Containers on the template by default.

    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. Background Image field: 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.

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

    c. 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 the author doesn’t want the Container to stretch across the entire page. It will center the Container within the 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.

    ii. Figure C below shows each background color option.

    c. Container Border dropdown: Add a rounded border to the Container. Choose between None, Container Border Radius (2 rem), or Container Small Border Radius (1 rem). Default None.

    d. Padding Top/Bottom dropdown: Add extra padding to the Container. Choose between None, Top, Bottom, or Top and Bottom. Default None.

    e. Padding Left/Right dropdown: Add extra padding to the Container. Choose between None, Right, Left, or Left and Right. Default None.

    f. Section Types dropdown: Authors should leave the selection at None.

    Container authoring dialog's Styles tab, including: background width, color, border, and padding

    Accessibility

    • 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].” Authors can edit both the same way.

    Other tips

    • 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.
    Content Tree from the lefthand side side toggle, listing all components and Containers on the page.
    • 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.
    • 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.
    • The full width root Container on the bottom of pages has a limited component library. The main body content root Container, and any additional Containers added to the page, have the full component library.

    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.
    Display of background colors for container. Colors include Surface, Background, Background Alt, Surface Container Lowest, Surface Container Low, and Surface Container High. Figure C: Container background color options.