Card Group Component

Component name: Card Group

Authors who can use: any

Templates/page types that can use component: all

Required or optional: optional

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.

1. With the edit wrench, open the component.

2. General Tab 

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

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)

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

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

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

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."

1. Card Group images look best at the following ratio/size: 16:9 , 1200x675px
2. Use the Emulator widget to test Card Group size on different devices.
3. Icons have different meanings across cultures, and should be selected carefully when used.
4. Description text on each Card will truncate after five lines.
5. The height of the largest Card in a group will determine the height for all Cards in the group.