Socket
Socket
Sign inDemoInstall

@gemeente-denhaag/timeline

Package Overview
Dependencies
42
Maintainers
2
Versions
346
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gemeente-denhaag/timeline

A Timeline component based on the material Stepper component


Version published
Maintainers
2
Weekly downloads
16
increased by128.57%

Weekly downloads

Readme

Source

Timeline

The timeline displays a progress through a sequence by breaking it up into multiple logical and numbered steps.

When to use

Use the timeline when a series of information needs to be ordered by time (ascending or descending). It represents the steps in a process in a chronological order. This process is part of, for example, a request that the user has made.

Use form navigation to show the user’s progress through a set of steps in a form

Anatomy

The timeline consists of:

  1. Step: this icon shows the state of a step
  2. Label: describes the information of the step
  3. Trailing icon (optional): this icon shows that it is possible to open the step that shows a description
  4. Descriptive text (optional): additional information about the step
  5. Container

(Interactive) states

The timeline contains the states normal, hover, disabled and focus.

Design properties

Typography

  • Label inactive and completed: TheSans/md/400
  • Label active: TheSans/md/700
  • Step: TheSans/s/700
  • Descriptive text: TheSans/md/400

Color

All steps that have been completed are indicated by an outlined circle with a checkmark. The current, active step the user is on is indicated by a filled circle. Steps the user has not encountered yet, or inactive steps, are indicated by an outlined circle.

  • Label inactive: text color Grey/4
  • Label active: text color Blue/3
  • Label completed: text color Blue/3
  • Step inactive: fill color white, text color Grey/3, border color Grey/3
  • Step active: fill color Blue/3, text color white
  • Step completed: border color Green/3
  • Trailing icon: svg color Grey/4
  • Descriptive text: text color Grey/4

Interactive states

  • Hover inactive: leading icon text color Blue/3, leading icon border color Blue/3, label text color Blue/3, trailing icon Blue/3
  • Hover active: trailing icon Blue/3
  • Hover completed: label text color Blue/3, trailing icon Blue/3
  • Disabled: leading icon Grey/2, label tect Grey/2, trailing icon Grey/2
  • Focus: container border color Ocher/5

Structure

  • Step: height and width 20px, padding-right 16px
  • Label: padding-top 12px
  • Trailing icon: padding-left 4px
  • Descriptive text: padding-top and padding-bottom 12px, padding-left 16px
  • Container: min-height 48px

Accessibility

[technical requirements]

Content guidelines

Timeline labels

Timeline labels should:

  • Contain one to two words.
  • Be able to immediately show what the step entails.
  • Accompany the timeline to indicate what the user will go through within each step.

Timeline descriptive text

Timeline descriptive texts should:

  • Provide additional information about the step
  • Be clear and short
  • Be present only if the information is important and the user needs to read it to understand what happened in that step

Best practices

Dos

Timelines should:

  • Allow the user to return to a previous step
  • Create a clear path to completion
  • Be clear as possible in order not to confuse users
  • Have 3–5 steps
  • Use numbers to describe the steps and indicate where in the process the user is

Don’ts

Timelines should:

  • Not be too long.

References

https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600

FAQs

Last updated on 06 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc