Timeline

To display an evolution of an element through the time.

Ready to use
Show details
Ready to use
Published: January 16, 2025
Updated: January 16, 2025
Light mode

Light mode

Dark mode

Dark mode

Anatomy

Component

 

The maximum height of the entire component is 264 px. If the content is longer, it is truncated and a ‘see more’ link is placed over it.

The maximum width is 900px.

 

Content

To be responsive and adaptable to all types of information. Timeline content must follow a specific anatomy.

Padding between contents

Padding between contents

Width of the
                                                                                                     content parts

Width of the
content parts

 

An avatar can be placed in the title area when the item refers to an interaction between users for example. This type of timeline requires its own anatomy:

Padding between contents

Padding between contents

Width of the content parts

Width of the content parts