Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content Licenses


Sign In
View in Clay

Timelines represent an horizontal visualization of events along the time.


Timelines are series of events placed in a timeline. Each event is composed by a point placed in the line a panel to describe the event to the right or left of the point.

The point can be any kind of identifier. We recommend the default one, circle, but it can be the case of events related to people where you might prefer to use a user identifier.



The icons are aligned to the left side of the screen.

default timeline left aligned

Right timeline

The icons are aligned to the right side of the screen.

timeline right aligned

Center timeline

The icons are aligned to the center of the screen.

timeline center aligned

Even/odd timeline

Being in the center the panel can appear in alternate positions starting on the left side for even configuration and starting on the right for odd configuration.

Timeline Even

timeline center aligned even order

Timeline Odd

timeline center aligned odd order

Right XS Timeline only

On window resize to mobile viewport (<768), the timeline icon are always aligned to the left. In case you want to place on the right, it is also possible with this example.

timeline right aligned extra small

Timeline Metric

timeline Metric

Something to improve? Report an issue!