Overview

Timelines provide a visualization of a chronological sequence of events.

Best Practices

Timelines should:

  • Group events into relevant time periods (e.g. last week, last month, last year) to subdivide the timeline into easily identifiable segments.
  • Use easily recognizable image icons where appropriate to categorize events
  • Be used directly on the a Page, and should never be nested within a card or other styled containers.

Timelines should not:

  • Contain empty time periods (i.e. time periods that have no events).

Examples

Timeline Events

Timelines are formed from multiple timeline periods. By grouping events into time periods (e.g. last week, last month, last year), it is easier to scan the timeline for specific events that fall within a specific period. With the exception of the most recent time period (which can always be found at the top of the timeline), the Timeline component will label each time period to subdivide the timeline into easily recognizable segments.

Each timeline period must contain one or more timeline events. Each timeline event should contain:

  • A title and a time. Titles should tell the user what type of action or entry the card represents. The title should correspond to the icon (where an icon has been provided).
  • An optional icon. The icon should be an easily recognizable image used to categorize events.
  • An optional href link. When provided, the link will highlight the card title as a clickable link, allowing the user to see more content related to the event card. Similar to EzLink, when using a client-side routing implementation a to path can be used instead of href, with the router link component provided via the as property.
  • An optional status. Use statues sparingly to highlight new or important entries in the timeline.
Code example
Playroom

Recent

  1. Phone Call

    New

    Reached out to Sara as a cold call. Discussed her role, tasks and potential opportunities to work together. Explained how we work and the types of events and event sizes that we can provide food for.

Last Month

  1. Text Message

    A note for the delivery driver - use the code #12345 at the door for access.

  2. Order # 1V3023D

    Complete

    $472.11 ยท Store #004, 101 Arch St. Boston MA 02110

  3. Customer Account Created

Open ended timelines

Timelines can be used to present the most recent activity or event history, providing the most up-to-date context on screen while leaving the timeline open-ended to allow older event information to be loaded on request.

When the expandable property is set, a footer will appear at the bottom of the timeline allowing additional event history to be requested.

The expandable property requires both an expandLabel and an onClick property.

Code example
Playroom

Recent

  1. Phone Call

  2. Phone Call

Current theme

Theme

Contents