Skip to main content

Timeline Examples

Timeline Component Usage Examples​

This page demonstrates various ways to use the timeline component with different styling options and configurations.

Basic Timeline with Different Colors​

Primary Item​

This is a primary colored timeline item on the right side.

Secondary Item​

This is a secondary colored timeline item on the left side.

Success Item​

This is a success colored timeline item on the right side.

Danger Item​

This is a danger colored timeline item on the left side.

Warning Item​

This is a warning colored timeline item on the right side.

Info Item​

This is an info colored timeline item on the left side.

Timeline with Custom Styling​

Custom Styled Item​

This item has custom border styling applied through the style prop.

Box Shadow Item​

This item has a custom box shadow and rounded corners.

Timeline with Text Formatting Options​

Bold Uppercase Text​

This item has bold, uppercase text formatting.

Italic Capitalized Text​

This item has italic, capitalized text formatting.

Centered Semi-bold Text​

This item has centered, semi-bold text formatting.