woman-about-impact

Image Column Card Border Offset Promo

Developer Notes
Content Author Notes
Requirements
ADMISSIONS

If you or your loved one is struggling with the disease of addiction, we’re ready to help. Our admissions process connects you to the targeted care you need.

News Home Medicare
TREATMENT PROGRAMS

The Addiction Alliance of Georgia makes the gold standard in substance and addiction treatment available close to home.

News Home MyChart Pt Portal
PREVENTION

Using proven prevention practices, the Addiction Alliance of Georgia offers a holistic model for addiction prevention to keep families and communities healthy and strong.

News Home Medicare

Developer Notes

  • Component resides inside EH Page Content tab in the Toolbox by the name AAG Column Card Promo.
  • Component has 2 variants, the one displayed on this page is Image Column Card Border Offset Promo.
  • The component has three cards, each containing a set of fields grouped in three field sections - Promo Card 1, Promo Card 2 and Promo Card 3.
  • The field names have the card number suffixed to be able to distinguish fields in the backend.
  • Applicable fields of each section
    • Image- Card :
    • Link- Card : link field to add link at the top and the same link is added to the image, the text of the link will be displayed as title.
    • Body- Card : RTE field for description
  • CAs should note that whenever this component is added, it takes the entire width of the container. To make it look like a card, CAs should apply the appropriate grid settings.
  • An example of the component is shown HERE.

Content Author Notes

1. Open Up Experience Editor (EE), and click "Add Component" icon at the top left 

2. Click "Add Here" and select "AAG Column Card Promo" under "EH Page Content"

4. Create data source 

5. Make sure "Design" view is enabled in View tab. Click Column Card Component to control the variant. 

6. Click image placeholder and select the add image icon to open up the media library and select image

7. Click link place holder text to insert link and place header for column card. URL Description will be the header/link text for individual cards. 

8. Click placeholder text to add promo content. Promo content is managed by an RTE field. 

9. Make sure to save and publish changes. 

 


Requirements

AAG Image Column Card Border Offset:

  • The CA should be able to edit the following:
    • Title (Link H3)
    • Body (RTE)
    • Image
    • CTA (optional not used here)
  • Three sets of fields plus CTA  (CTA will be optional)
  • Upon hover, carat and title changes color from AAG green to AAG orange and extends.
  • Title and image are clickable.
  • There is no character limit on body, and all images would remain the same height. 
  • For styling please see the live site. 
  • This component must follow accessibility standards for alt text, and keyboard navigation. 

Mobile:

  • Content is stacked and image on bottom.