emory-background

Footer

Developer Notes

Footer:

  • The Footer will be displayed on all pages of the site at the bottom of the page.
  • The Footer has been implemented using Partial Designs. It is located here - /sitecore/content/EH/Emory/Presentation/Partial Designs/Footer.
  • This partial is added to the Page Design.
  • The Top section of the Footer consist of Link "Back to top" which resides inside "Link" under variant Back to Top.  
  • The Logo section consist of Logo and Social Media Link list:
    • Image (Logo) - Resides inside Media tab in the Toolbox by the name Image(reusable)
    • Social Media Link list - Resides inside EH-Navigation tab by the name Social Icon Link List
  •  The list section consist of Link list. They reside under EH-Navigation tab by the name Heading Link list
    • The Author can add links to all the list items as well as heading-item too
    • The links could be internal or external depending upon the authoring
    • The list is divided into 4 columns which are managed by Grid settings
  •  The bottom section consist of Description & Copyright section and Footer-Logo
    • Description & Copyright - Resides under Page Content tab by the name Rich text (Reusable)
    • Footer Logo- There are 2 different logos placed side by side. Both resides inside Media tab in the Toolbox by the name Image(reusable)
  • CA's should note that when Footer goes into the mobile view, The Link list converts into an accordion. In this case, the Heading of the list doesn't act as a link.

 

Content Author Notes

1. Navigate to Partial Designs under Presentation in the Content Tree

2. Open up Partial Design menu and right click "Footer" to open up in Experience Editor 

3. Links are managed by Link Lists

4. To manage the individual links, ensure editing mode is enabled in View tab. click the click you would like to manage and open up link properties by clicking the link icon with a pencil.

5. To add links, ensure the design view is enabled under View tab. Click the around the Link list and a dialog box will open with the following options: 

  • Add Link
  • Delete Link
  • Move Up
  • Move Down
  • Move First
  • Move Last

6. Disclaimer is managed by an RTE field. Authors can manage on the field or click the pencil icon to open up the RTE window. 

7. Logos are managed by image fields 

8. Social icons are managed by a social icon link list

9. Make to save and publish changes. 

Requirements

Footer:

  • The Footer will be displayed on all pages of the site at the bottom of the page.
  • The Footer should contain the following elements:
    • Image (Logo)
    • Image Link list (Social Icons)
    • Divider- styling on placeholder
    • Link List- 4 column layout (Max 4)
      • Heading Links
      • Unlimited Links
      • Links allow for pages, files and external urls.
    • RTE
      • Should include for copyright.
    • Image Logos (2 links)
  • For styling see: Designs
  • Hover state on links change to blue
  • Primary logo links to home page
  • Icons: Note and instructions, go to: Font Awesome (Search from desired icon click the icon you want, copy just the icon name, such as 'fab fa-face book"
  • Image logos are clickable and route to different pages. These logos aren't editable.
  • This component must follow accessibility standards for keyboard navigation.

Mobile:

  • Content is stacked on mobile.
  • Link lists are collapsed as an accordion (dropdown menu). When the user clicks on a link item it should expand and all subitems should be visible. 
  • When user opens one list the other lists remained closed, opening one closes the other. 
  • The accordion icon should change to an open/close state. +/-