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

Card Group Component

The Card Group component presents collections of similar content. The Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices.

Overview

Component name: Card Group

Authors who can use: any

Templates/page types that can use component: all

Required or optional: optional

Sample Card Group component, using image variation.

Authoring Fields

Adding the Card Group component to the page

1. Once on the desired page in Edit mode, add the Card Group Control component by doing the following:

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

b. Option 2- on the left hand rail, navigate to the Components tab. Type “Card Group” in the search bar, or scroll to the card Group in the list. Double click to add to page.

Editing the Basic Hero component

1. With the edit wrench, open the component.

Card Group toolbar, featuring the edit wrench.

2. General Tab 

Card Group general tab with option to add number of columns

a. Teaser Details:

i. Title field: Add a title to the Card Group.

ii. Title Heading Level dropdown: Select a heading level, between H2-H6.

iii. Description field: Add a description to the Card Group.

iv. CTA Label: Optionally add a label to a CTA, to direct the residents to another page.

v. CTA Link: Optionally add a link to a CTA, to direct the residents to another page.

b. Number of Columns number selector: Select between 2-4 columns of Cards. There is no limit to the number of Cards that may be added; they will be sent to the next row if space does not permit.

3. Card Details tab

Card group authoring for card details, user can choose card type and has options for building cards

a. Card Type dropdown

i. Icon Card: Cards will display an icon.

ii. Image Card: Cards will display an image.

b. Build Card Using:

i.In ternal Pages – The content will be populated by the Page Properties already authored on the linked page.

1.  Options for Internal pages:

a. Link URL field: This field will link to the page within AEM, and pull the authored Page Properties for the Card.

i. The properties pulled: Image or Icon, Alt Text or, Decorative image – No alt text checkbox, Title, Description, Link label, CTA.

ii. Manually (provide details for each card item)

Manual input fields when author provides details for each card item - category tag, date, image
Manual input fields when author provides details for each card item - decorative image checkbox, alt text checkbox, card title, card description, card label
Manual input fields when author provides details for each card item - card link label and card link URL

4. Options for Manual – Image

a. Category Tag field: Displays as the tags on the Card.

b. Date selector: A date that can be displayed on the Card.

c. Image Drop zone pathfinder field: The area where the author can author the image by navigating to the DAM folder.

d. Decorative image – no alternative text checkbox: This checkbox is used if the image that is authored is considered decorative. If it is decorative the image does not require alternative text to be authored. Default unchecked.

e. Image Alt Text field: This text helps screen reading tools describe images to visually impaired readers.

f. Inherit alt–text from the DAM: Selecting this checkbox will pull the alternative text for the image authored in the DAM. Default unchecked.

g.  Card Title field: The title that is displayed on the Card.

h. Card Description field: A short description field that displays on the Card when authored.

i. Card Link Label field: The label that displays for the link on the Card. The label should closely match the page title of the targeted page.

j. Enable Accessibility Label and Disable Link Label checkbox: When the author selects this checkbox, the label is visually hidden, but still available to assistive technologies such as screen readers. Default unchecked.

i. Card Link Label Accessibility field: Field is enabled when the above checkbox is checked. Only add text if a Card Link Label is not authored to display visually on the Card.

k. Card Link URL field: The link on the Card, which residents will be led to upon click. May be internal or external.

l. Add button: Will add another Card to the group.

5. Options for Manual – Icon

Manual input fields when author provides details for an image
Manual input fields when author provides details for an image

a. Icon – The field where the author enters the name of the icon from Remix Icon library: https://remixicon.com/

b. Icon Justification – This will position the icon on top of the title or to the side.

c. Other fields are the same as in the Options for Manual – Image.

6. Style tab

Style dropdown: Options here allow for padding to be removed.

a. Style dropdown: Options here allow for padding to be removed. This may be done to better fit other components above or below the Card Group.

  i.  None: No change to default padding.

  ii. Remove Top Padding

  iii. Remove Bottom padding

  iv. Remove Top and Bottom padding

Card Group examples

Figure A: Two-column image Cards, manually authored. Figure A: Two-column image Cards, manually authored.
Figure B: Two-column image Cards, internally authored. As the pages selected don’t have images currently applied in Page Properties, they show as blank in the screenshot. Once images are applied in Page Properties, they will be displayed here. Figure B: Two-column image Cards, internally authored. As the pages selected don’t have images currently applied in Page Properties, they show as blank in the screenshot. Once images are applied in Page Properties, they will display here.
Figure C: Three-column icon Cards, manually authored. Figure C: Three-column icon Cards, manually authored.
Figure D: Four-column icon Cards, internally authored. As the pages selected don’t have icons currently applied in Page Properties, they show as blank in the screenshot. Once icons are applied in Page Properties, they will display here. Figure D: Four-column icon Cards, internally authored. As the pages selected don’t have icons currently applied in Page Properties, they show as blank in the screenshot. Once icons are applied in Page Properties, they will display here.

Accessibility

1. When Cards have no visual link label, a right arrow icon is used as the CTA. In this case, the accessibility link label should match the Card’s title.

2. Icons should be chosen to reinforce the Card’s purpose, as indicated by the title

Authors should fill either the Title or Title Accessibility Label fields. 

  • Title field now has a checkbox "Enable Accessibility Label and Disable Title"
    • Tooltip for checkbox: "When this is checked, no title displays. The accessibility label will be used for assistive technologies."
  • When checked, display optional "Title Accessibility Label" field.
    • Tooltip for field: "The Accessibility field will be read for screen reader users. It is only needed if the Title field is not authored."

Other tips

1. Use the Emulator widget to test Card Group size on different devices.

2. Icons have different meanings across cultures, and should be selected carefully when used.

3. Description text on each Card will truncate after five lines.

4. The height of the largest Card in a group will determine the height for all Cards in the group.