woman-about-impact

Image Column Card Border Promo

Developer Notes
Content Author Notes
Requirements
News Home Medicare

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 MyChart Pt Portal

TREATMENT PROGRAMS

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

News Home Medicare

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.

View All

Developer Notes

  • The component resides inside the EH Page Content tab in the Toolbox by the name AAG Column Card Promo.
  • The component has 2 variants, the one displayed on this page is Image Column Card Border 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.
  • This variant has colored-borders (fixed) added to three cards.
  • 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
  • Link-View All -  field to add Link in the bottom of the component.
  • 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 Variant:

  • The CA should be able to edit the following:
    • Image
    • Title (LINK H3)
    • Body (RTE)
    • CTA
  • Thee sets of fields plus CTA (CTA will be optional)
  • Upon hover, carats and title changes color from AAG green to AAG orange and extends.
  • Title and image are clickable. 
  • The border colors: See Brand Guidelines
  • For Styling see live site
  • This component must follow accessibility standards for alt text, and keyboard navigation.

Mobile:

  • Content is stacked, image on top.