Back to components

Timeline

The Timeline Component is meant to visualize processes in an easy and intuitive way.

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
Preview

Table of Contents

Edit this section, Opens in new window

Overview

The progress tracker is meant to show the user where the user is in a process that requires multiple steps. Not to be confused with "Progress Indicator" or "Progress bar”.

Edit this section, Opens in new window

Variations

Default

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.

Without description

  1. Contact authorities
  2. What do I need?
  3. Report
  4. Confirmation

Expandable

Vertical

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
  4. Confirmation Confirmation email, check your inbox. You will hear from us within 24 hours.

Vertical and expandable

Edit this section, Opens in new window

Usage

Do not use the Timeline Component if you have more than 4 steps. Steps needs to be easily scanned to get an overview of the steps. It is better to bundle steps into main steps if there are more than 4 steps. Always aim to use 3 steps since the reason with the Timeline Component is to get an overview of the process

Labels

Use labels that indicate the purpose of the step. When writing the step title, be short and concise. Use maximum 1-2 words.

Content

Under "Read more" it is possible to add text that further describe the step. Here it is meant that the user can find more information about each step. The text should be short and concise. Maximum 4 lines.

Edit this section, Opens in new window

Anatomy

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
  1. Title
  2. Description (optional)
  3. Step
Edit this section, Opens in new window

Specs

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
Edit this section, Opens in new window
Contact us, Opens in new window