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 card has a clean, modern design with rounded upper corners
• 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

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 Digital & Web team.

The link itself will have the format href="#204149" - a hashtag/HTML anchor followed by 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).

Example

Why the turtle?