Contact Card and
Contact Card Layout

Description


The "Contact  Card" shows a preview of the most important contact information of a contact person.
One or more "Contact Cards" are arranged one after the other in a "Contact Card Layout" to show multiple contact persons.

Usage


  • The contact card should be placed at the end of the content pages before teasing similar content. 
  • Basically the background color,  the "Contact Card Layout" is placed on is the same as the previous content section. Contact cards for itself are always white.
  • On news/events detail pages only the center-aligned version should be placed.

  • On contact pages, only the left aligned version should be placed. The cards here will float so it arranges itself automatically when there are more than 3 people.

 

Demonstration


How to build a ContactCard Component

  • The "Contact Card" is a kind of object ("fragment") which is currently created in the "Fragments" section of the AEM.
  • Once this fragment has been created a view of this document can be set up by using a "Contact Card Experience Fragment Template".
  • Simply place a "Contact Card" component on a card-document created with this template.
Image of a modal for setting up a Contact Card
  • Configure the "Contact Card" (see left).
  • After setting up all information the "Contact Card" fragment is finished to be placed into a "Contact Card Layout" component.
  • Switch to the "Sites" section of the AEM
  • Place a "Contact Card Layout" component into a "Column Control" on a designated page
  • The "Contact Card Tile view" checkbox is intended for viewing single "Contact Cards" as tiles. Usually, standalone "Contact Cards" are formatted in landscape panels. This checkbox is not needed when two or more cards are shown
  • The "Title"  input field will show a title for each card, but usually, you'll have a separate "Title Component" set upon the "Contact Card Layout" component
  • With the "Experience Fragment path" selector you finally will select the actual "Contact Cards" previously created card fragments (see above)

Dont's

  • Never place a "Contact Card" component in other components –  only pick them with the "Experience Fragment path" selector of the "Contact Card Layout" component
  • Avoid placing a "Contact Card Layout" in other components than "Column Control"