Timeline bases on Cards
This is an example of displaying the timeline in a card view with the use of HTML and CSS. The Main div consists of two different divs. One is to display the title section or the header section and the other one to display the timeline. The heading is set with the h3 element with the styles of font-family as inherit, font size as 2rem, line spacing as 0.1rem, color as #fff, font-weight as normal, and margin as 0. The timeline has the styles of padding as 3rem 2rem !important, margin as 0, padding as 0, list-style as none, position as relative, z-index as 2, content as empty, position as absolute, width as 4px, background as #fff, top as 0, right as auto, left as 25px, height as 100%, z-index as -1 and box-shadow as 0 0 8px rgba(0,0,0,0.085), 0 1px 0 rgba(0,0,0,0.02). The time dot has been implemented with height and width as 1.5rem, background as #fff, border-radius as 2rem, flex as 0 0 1.5rem and box-shadow as 0 0 8px $green.