Basic
Timeline can be used for listing agenda. Use marker as the timeline pin. Put your content into .timeline-content.
Lorem ipsum dolor sit amit
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna elit enim at minim veniam quis nostrud
More content
Use your creativity to make a more complex timeline. In the example below, we use rich list to appear bordered and clickable timeline content.
Consectetur
Dapibus ac facilisis inPorta
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Cras justo odioVestibulum
Morbi leo risusTime
Add time information to your timeline by adding text inside .timeline-time before .timeline-pin and you must extend .timeline element with .timeline-timed class.
Lorem ipsum dolor sit amit
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna elit enim at minim veniam quis nostrud
Zigzag
We have one more timeline version, you just need to add .timeline-zigzag class to default timeline elements to appear like below.
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna elit enim at minim veniam quis nostrud
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna
