Popup Card Slider

The Popup Card Slider content type has been created to allow additional content to be viewed when an activating link or button is pressed.

Having the content in a popup has two main use cases:

1. it can save space on the page by not showing content that is not needed by / of interest to all users, giving them the option to open the popup if it's relevant and of interest to them 
2. it can make supplementary information easily accessible without taking the user to a new page, and possibly away from an important funnel / user journey page 

Key features

• Activated by a specific link or button on the page
• The card slides up from the bottom of the page to cover a large portion of the page content, and blurs the page background, in order to focus the user's attention on the popup content
• The popup pulls in a title and content from a text block, so links, headers, etc can be included
• The popup can be closed by clicking the widely recognised 'X' close button in the top right corner, by clicking outside of the popup, or by pressing the Escape key

Implementation

1. The popup card must be created first by adding the 'Popup card' content type to the same page as the content type that will trigger it.

2. The popup card can then be triggered from the following content types by selecting the link type as 'Popup link':

• Landing page links
• Multi promo
• Narrow promo
• Impact quote

3. After selecting Popup link, click on 'Add content link', click on the section/page you are editing, and select the popup card created in step 1 from the list of content types shown.

Note: Some other content types have an older implementation of the popup card, and the link used for activation needs to have the 'popup-trigger' CSS class added, and therefore implementation of this content type is restricted to the Web and Digital team.

The link itself will have the format href="#popup204149" - a hashtag/HTML anchor followed by 'popup' and the (usually 6-digit) number of the content to be accessed (this can be seen on the end of the URL by hovering over the title of the content type in T4, e.g. https://t4.derby.ac.uk/terminalfour/page/content#edit/233/204149).