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  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. Enable Accessibility Label and Disable Title: When the author selects this checkbox, the label is visually hidden, but still available to assistive technologies such as screen readers. Default unchecked.

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

iv. Display Size of Title: Select a size for the Title display.

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

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

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

viii. 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. Internal 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 are pulled from Page Properties' Image tab- the featured icon or image, as authored.

ii. Manually (Provide details for each card item)

4. Options for Manual – Image

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

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

c. Image Drop zone pathfinder field: Add an image by navigating through the DAM folder, or by dragging/dropping from the lefthand image selector.

d. Decorative image – no alternative text checkbox: Meaningful images, which contribute new information to the page, must have alternative text provided for visually impaired residents. Decorative images which don’t convey additional meaning do not require alternative text for accessibility. Default unchecked. If checked, below accessibility fields will be disabled.

e. Image Alt Text field: Add alternative text.

f. Inherit alt–text from the DAM: 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.

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. The accessibility label should match the Card's title.

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: 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. Reference the Using Icons guide for more info.

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

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 Bottom Padding