Interactive Tabs and Cards
From customised tabs and stacked cards to animated and clickable quizzes, I delved into the magic of code-driven interactivity to create engaging and dynamic user experiences. Join me as I showcase how I crafted these interactive browsing experiences on the company intranet!
Interactive web elements
​
Otto International
​
2023-2024
​
CSS, Tumult Hype, Wordpress​
Custom Tabs using CSS
​
Regular tabs don’t provide much room for customization. While you can tweak fonts and colors, personalizing each content box is out of the question. That’s when I rolled up my sleeves and dived into the world of code. By revamping these tabs, I created something unique that instantly caught the attention of hundreds of users!
Regular tabs on Wordpress Elementor.
CSS codes to add stylisation.
The results!
​
In my article about cryptocurrency, I’ve harnessed the power of these tabs to elegantly condense and organize information. Rather than overwhelming readers with lengthy content, users can now explore specific FinTech keywords by clicking on the designated buttons. It’s a much more user-friendly way to dive deeper into the world of digital currencies.
In that same post, I also incorporated hover cards to organize all the information about cryptocurrency risks. Users can simply hover over the boxes to reveal detailed explanations. It’s a subtle yet effective way to enhance engagement!
Stacked Cards using CSS
​
​​
By weaving together a string of CSS codes, I crafted stacked cards to elegantly organize lengthy content. The pros? The material feels more cohesive, dynamic, and vibrant compared to the traditional black text on a white background. However, there are trade-offs. Users might need to scroll a bit more to reach the bottom (where they can complete their read and hit that ‘like’ button), and the abundance of cards could potentially overwhelm them. In the future, perhaps limiting the number of cards would strike a better balance.
​
Watch the stacked cards in action:
Interactive quizzes
As travel takes off in the post-COVID world, I’ve developed an interactive “dos and don’ts” quiz for online booking using Tumult Hype as part of our company’s cybersecurity training. The key to helping people recognise common frauds is by showing them the signs! These best practices raise awareness, ensuring that viewers have a seamless journey both at work and beyond.