Skip to content

Card Interface Demonstration and Instructions#


The Card Interface transforms a list of Blackboard Learn items (e.g. Figure 1) into a visual, responsive and contemporary card interface (Figure 2).

Figure 1 - List of Blackboard items

After the tweak

Figure 2 - Example Card Interface output

The Card Interface is a collection of HTML and Javascript that you add to any Blackboard page where you wish to have a card interface. Once installed, you slightly modify the other items on the page to specify which items will appear as a card.

Once a Blackboard page has finished being displayed the Card Interface will hide the original Blackboard items and displays the matching cards.


Creating engaging, specific, visual and responsive content in Blackboard is hard. But at the same time, such content offers a better user experience and used appropriately can improve student cognition, emotions, interest and motivation (Leutner, 2014; Mayer, 2017). Fanshawe et al (2020) suggests that the type of clear and logical organisation enabled by the Card Interface “positively impacts students’ performance, and helps students to feel like the experience they have accessing the course content and activities is important to the lecturer”.

The Card Interface is designed to make it simple for normal people to create engaging, context specific, visual and responsive content in Blackboard.


Leutner, D. (2014). Motivation and emotion as mediators in multimedia learning. Learning and Instruction, 29, 174–175.

Mayer, R. E. (2017). Using multimedia for e-learning. Journal of Computer Assisted Learning, 33(5), 403–423.