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

    List Component

    A List is a component that groups related content together vertically. All List items include links to internal or external pages. Leading icons and images can be optionally added.

     

    The List may be maintained either manually or dynamically. If manually, the author must add/remove each List item by editing in the authoring dialog. If dynamically, the author must select a parent page, and the List will update itself when child pages are created or modified.

     

    There are two List style variations: the standard List, and the Tile, which has more limited text options.

    Overview

    Component name: List

    Authors who can use: all

    Templates/page types that can use component: all

    Required or optional: optional 

    Authoring Fields

    Adding the List component to the page

    1. Once on the desired page in Edit mode, add the List component by doing the following:
      1. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “List” in the search bar, or scroll to the List in the list. Double click to add to page.
      2. Option 2- on the left hand rail, navigate to the Components tab. Type “List” in the search bar, or scroll to the List in the list. Double click to add to page.

    Editing the List component – manually authored List

    This List is manually authored. The author must add/remove each List item by editing in the authoring dialog.

    1. With the edit wrench, open the component.

    2. General tab

    a. Teaser Details fields

    i.      List Title field: Optionally add a title to appear above the List.

    ii.      Title Heading Level dropdown: Select the heading level of the title, between H2-H6.

    iii.      Description field: Optionally add a description to appear above the List. This may contain context on the List entries and purpose.

    iv.      CTA Label field: Optionally add a CTA to appear above the List. The label here is the text that will appear on the CTA.

    v.      CTA Link pathfinder: When the resident clicks the CTA, they will be led to this link. Link may be internal or external..

    b. List Columns selector: Select between 1-4 columns to display.

    3. List Details tab

    a.  List Type dropdown: Select whether the List should include images, icons, or neither. Default: None.

                               i.      None

                               ii.      Image

                               iii.     Icon

    b. Default List fields

                               i.      Built List Using dropdown: Select whether the list should be built internally or manually. Default: Internal.

    1. Internal Pages: All List links will be pages pulled from AEM.

    2. Manually (Provide details for each list item): All List links will be added manually, as some may be external or need additional context.

    3. Recently Updated Pages: see next section on dynamic Lists.

    4. Recent Press Releases: see next section on dynamic Lists.

    c. If building internal List

    i. Add multifield: Click Add to open the fields to author the List entries. The author will select Add for every item that will display in the List.

     ii. Link pathfinder: Use the pathfinder field to navigate to a page within AEM that should display in the List. The page title will appear on the List. If Image or Icon was selected in Step 3.a, and the page has an Image or Icon in its Page Properties, those will display as well.

    d.  If building manual List

    i. Add multifield: Click Add to open the fields to author the internal or external List entries. The author will select Add for every list item that will display in the List.

    ii. The fields that will display once selecting Add:

    1. Pre-title field: Optionally add a pre-title to appear above the title.

    2. Title field: Add a title for each List entry.

    3. Description field: Optionally add a description for each List entry.

    4. Link pathfinder: Add a link for each List entry. Links may be internal or external. For internal links, use the pathfinder field to navigate to the page within AEM that should display in the list.

    5. Leading Image (only in image Lists)

    i. Drag and drop from the side rail, or

    ii.  Browse for an image to upload

    b. Decorative image – no alternative text checkbox: Images which don’t convey additional meaning do not require alternative text for accessibility. Default: unchecked. When unchecked, enable the below fields:

    i. Alternative text for accessibility field: Add alternative text.

    ii. Inherit from description of asset checkbox: If selected image already has alternative text defined in Assets, use this text. If unchecked, the “Alternative text for accessibility” field will be enabled. Default: unchecked.

    6. Leading Icon (only in icon Lists): Enter an icon from the Remix Icon library: https://remixicon.com . See "Using Icons" guide for more detail.

    iii. Divider checkbox: When checked, show a line between each List item. Default: checked.

    4. Style tab

    a. List Style dropdown: Select whether the List should display as a regular List, or in Tile format. Note that Tiles only contain the title and icon/images; no other text will appear. Default: List.

    CTA toolbar, featuring the edit wrench.
    CTA authoring dialog's Properties tab. Fields described on page.
    Manual List fields in the authoring dialog. Fields described on page.
    List authoring dialog- Style tab, with List and Tile options. Options described on page.

    Editing the List component – dynamically authored List

    This List is dynamically authored. The author must select a parent page, and the List will update itself when child pages are created or modified.

    1. With the edit wrench, open the component.

        a. General tab - no changes from above.

    2. List Details tab

        a. List Type dropdown: Select whether the List should include images, icons, or neither. Default: None. None is the best option for dynamic Lists.

    i.      None

    ii.      Image

    iii.      Icon

        b.       Default List fields

    i.      Built List Using dropdown: Select whether the list should be built internally or manually. Default: Internal.

    1.       Internal Pages: see prior section on manual Lists.

    2.       Manually: see prior section on manual Lists.

    3.       Recently Updated Pages (dynamically updated): Lists pages that have been created and published, or modified and published.

    4.       Recent Press Releases (dynamically updated): Lists pages that have been created and published based on their date in Page Properties.

    3. If building Recently Updated Pages List

    a. Parent Page Folder Link pathfinder field: Enter the link to the parent page. Child pages under the parent will populate the List.

    b. Number of List Items field: Enter the number of items to display in the List, between 2-10.

    4. If building Recent Press Releases List

    a. Parent Page Folder Link pathfinder field: Enter the link to the parent page. Child pages under the parent will populate the List based on each page’s date in Page Properties, displaying in reverse chronological order.

    i.      In Page Properties, this is the date picker field “Date of Press Release,” which is found in the CoPA tab. See Agency News Article user guide for more info.

     

    b.  Number of List Items field: Enter the number of items to display in the List, between 2-10.

    5. Divider checkbox: When checked, show a line between each List item. Default: checked.

    6. Style tab – no changes from above.

    7. Publish the page. Dynamic Lists are best viewed in publish mode. They may take several minutes to refresh as changes are pushed live.

    a. If unable to publish, use the Publish to Preview workflow. See Workflow 1: Publish to Preview guide for more info.

    8. When a child page is created/modified, and then published, the page will automatically jump to the top of the List (dependent on Page Properties for Recent Press Releases).

    Authoring dialog for Recently Updated Pages variation. Fields described on page.
    Authoring dialog for Recent Press Releases variation. Fields described on page.
    Authoring dialog in Page Properties. Fields described on page.

    List component Examples

    Below are examples of different Lists.

    Sample List- manually authored, icon variation, with external links.

    Figure A: Manually authored Icon List.

    Sample List- internally authored, neither icon nor image, internal links. Includes a Teaser description of the List.

    Figure C: Internally authored List – neither icon nor image.

    Sample List- dynamic Recently Updated Pages variation, neither icon nor image, internal links.

    Figure E: Recently Updated Pages List – neither icon nor image.

    Sample List- manually authored, image List, external links.

    Figure B: Manually authored Image List.

    Sample List- tile variation, manually authored, icon List, external links.

    Figure D: Internally authored icon List, set to Tile style.

    Sample List- dynamic Recent Press Releases variation, Tile variation, neither icon nor image, internal links.

    Figure F: Recent Press Releases List, set to Tile style.

    Accessibility

    1. There are no specific accessibility notes for the List component.

    Other tips

    1. List images look best at the following ratio/size: 1:1, 600x600 px
    2. Use the Emulator widget to test List size on different devices.
    3. Lists work best to organize several related pieces of copy and content, while taking up less space than a Card Group.
    4. Keep content clear and concise so items are scannable to residents. Supporting text should span about two lines.
    5. Order List items in a logical way, such as alphabetical or numerical.
    6. Use Lists to help residents find a specific item and act on it.
    7. Use icons, text, and actions in a consistent format across a List.
    8. Dynamic and internal Lists will show the Navigation Titles field from Page Properties, if authored.
      1. If not authored, show Title field.
    9. Dynamic Lists should be text only; no image or icon should be added in authoring dialog.
    10. It is recommended for authors to add the Recent Press Releases List to their Agency Landing Page, though it may be added elsewhere.