Timeline & History

Design a timeline and history screen that lets people scan a sequence of events, then open any point for more detail. Treat the timeline as the main navigation: dates, milestones, and gaps should all be visible at a glance, with a clear indicator for the current selection.

Use a layout that supports both overview and detail. In the collapsed state, show event labels, timestamps, and a short summary. In the expanded state, reveal supporting content such as notes, attachments, status changes, or related actions without breaking the flow of the timeline.

Include controls for filtering by date range, event type, or author, plus a way to jump to a specific milestone. Design hover, selected, loading, and empty states so the user always knows what is clickable, what is active, and what to do next. Make the hierarchy work on smaller screens too, where the timeline may need to collapse into a vertical list or stacked cards.

Infuse your design with storytelling by using interactive timelines that allow users to explore points in history as if they were turning the pages of a book.