The timeline displays a list of objects, such as tasks, events, or meetings, in chronological order. Objects in the timeline are presented as tappable cards that display the most important information about an object, such as title, description, or status. The timeline view can be filtered or searched.

Timeline on mobile (left) and tablet (right)
Timeline on mobile (left) and tablet (right)


  • Use the timeline cards to show a brief preview of the object’s details. 
  • Use the timeline to organize objects based on due date or time. 
  • Use the timeline to view the status of different objects. 

Don’t put the entire object’s details in the timeline cards. To view details, the user can drill down into the card.


The structure of the cell includes a timestamp, an indicator, and a task card.

A. Timestamp

The timestamp displays the time of the object.

B. Indicator 

The indicator represents the state of the object. Users can set the state of an object by drilling down to the object’s detail page.

C. Object Card

This card displays the object and object details for the corresponding date. If the user taps on the card, they will be able to view the full description of the object.

Timeline item anatomy
Timeline item anatomy

Object Card

The object card can contain up to three levels of content: the task title, the description, and the task type.

A. Title (Mandatory) 

This displays the name of the object.

B. Description (Optional)

The description shows details or instructions for the object.

C. Supporting Text (Optional)

This provides an additional label to accommodate additional information.

Object card anatomy
Object card anatomy


The timeline contains the following six indicators which describe different timeline states of the object:

A. Start Node

The start node indicates the beginning of the timeline.

B. Past Node

The past node indicates objects that were processed in the past.

C. Today Marker

The today marker indicates the user’s current position on the timeline. The timestamp will be encompassed by a circle.

D. Done Node

The done node indicates that an object has been completed. Once the user marks the task as “Complete” in the object details, the node will display a blue fill with a checkmark.

E. Upcoming Node

The upcoming node indicates an upcoming object in the timeline.

F. End Node

The end node indicates the end of the timeline.

Indicator types
Indicator types

Behavior and Interaction

Users can scroll through the timeline to view any number of objects in the past, present, or future. The object cards are tappable and if tapped, drill down to the object details of that particular card. The header is sticky to help users keep track of their place on the timeline.

Navigating from the Timeline to the object details
Navigating from the Timeline to the object details

Adaptive Design


Because of the smaller real estate on mobile, the titles, descriptions and supporting texts within the object card may be truncated. The timeline may also share the screen with another content type such as a map view. Therefore, the bottom sheet can be used to display the timeline.

Timeline view (left) and timeline bottom sheet (right) on mobile
Timeline view (left) and timeline bottom sheet (right) on mobile


The timeline can fit on tablet in different ways. If the timeline is the only content on the screen, it will be center aligned. However, if the timeline shares the screen with other content, a side sheet can be used to display the timeline.

Timeline view (left) and timeline side sheet (right) on tablet
Timeline view (left) and timeline side sheet (right) on tablet


Related Components: Object Cell

SAP Fiori for iOS: Timeline

Development: Timeline