Timeline Preview
Intro
The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of.

Timeline preview on mobile (left) and tablet (right)
Usage
Anatomy
A. Header
The header summarizes the timeline preview.
B. Timeline Preview Object
The timeline preview object is a reduced representation of the timeline view objects. This includes reduced content such as the timestamp, node, and task title.
C. Button Footer
The button footer contains a button that leads users to the timeline view with the task cards and descriptions.

Timeline preview anatomy
Task Object
A. Timestamp
The timestamp displays the time of the timeline preview object.
B. Node
The node indicates the current state of the object.
C. Title
The title displays the name of the object.

Task object anatomy
Behavior and Interaction
The timeline preview allows users to navigate to the timeline component. Users can tap on the “See All” button footer in the timeline preview to navigate to the timeline view.

Navigating from the timeline preview to the timeline
Adaptive Design
On mobile, the timeline preview allows the user to view the first two nodes. On tablet, a more extended view of the timeline allows displaying more objects, such as five nodes depending on the tablet orientation and screen size.

Timeline preview on mobile (left) and tablet (right)
Resources
Related Components/Patterns: Object Cell
SAP Fiori for iOS: Timeline Preview
Development: Timeline