A responsive, colorful timeline based on flexbox. Add and remove events.
Note: when you add or remove an event, be sure to update the content field:
numberOfItemsTo reflect the correct number. This is used to calculate the proper height
This mod is based on a design by Paul Barker
These team portrait circles are grayscale until hover, and then they show the color and a tooltip with the team member s name and role.
The tooltips are based on Tippy and Popper.js, so they never go off the screen.
Simple, subtle, and effective
A simple section content wise, but has a nice effect of moving the image up and fading in as the user scrolls into the section.
The scrolling appearance is based on the library AOS animate on scroll
An example content section for using split A/B testing on a page.
When a given version loads for the user, it is saved as a cookie so that future page reloads will show the same version.
By default there is an A and a B version of the content, which will be loaded randomly for the user. That value A or B is stored in the splitValue cookie, and can be used for analytics if desired.
This team page has a classic look with a white border around each team member.
Hover to show more information and a Read More link for each user.
The design is based on a Pen by Team Solution Drop