Timeline

The Timeline component is used to display a sequence of events or milestones in chronological order. It can be customized with various styles, images, videos, and icons to enhance clarity and engagement. To apply this component, add a container element with the .timeline class and add .item class for child elements.
lock
12.12.2020
John Doe,
Te vidisse cotidieque est, in adhuc honestatis his.
lock
12.12.2020
Jane Doe,
Te vidisse cotidieque est, in adhuc honestatis his.
wifi_protected_setup
Jane Doe aliquid consequat debitis eos.
extension
John Doe,
Oeehhh, that's awesome.. Me too!
12.12.2020
Media & Actions

Also, you can add the media elements or actions to Timeline component with the .media and .actions classes.

photo
Single Photo
Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum hendrerit.
2 weeks ago
photo
Three Photo Columns
Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum hendrerit.
2 weeks ago
play_arrow
Youtube Video
Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum hendrerit.
2 hours ago
photo
Two Photo Columns
Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum hendrerit.
2 weeks ago
Props
Default Class Name Combinators
timeline .timeline
item .timeline .item
author .timeline .item .author
body .timeline .item .body
type .timeline .item .type
date .timeline .item .date
media .timeline .item .media
actions .timeline .item .actions
Style Combinators
primary .primary.type
success .success.type
warning .warning.type
error .error.type
dark .dark.type