Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Timeline

Timeline displays upcoming, current, and past activities.

last modified: 19/08/2022 10:20:10

Types

Timeline displays upcoming, current, and past activities to the user. It can be both functional and informational:

Informational timeline

The informational timeline gives an overview to the user about the steps to achieve an action (e.g. activate a product).

The informational timeline component is only available on:
  • Positive mode: white and grey2 background colors.
  • Negative mode: purple and black background colors.
Functional timeline

The functional timeline informs the user about an ongoing process by displaying upcoming, current and past activities (e.g. ticketing system).

The functional timeline component is only available on:
  • Positive mode: white and grey2 background colors.
  • Negative mode: not available.

States

  1. Default state
    State visible before click. Content is hidden and the chevron is pointing downwards.
  2. Hover/Focused state
    State visible when the cursor hovers the step and chevron and triggered by keyboard navigation or click. Cursor becomes a pointer.
  3. Opened state
    State visible when clicked. The branch opens, allowing the full content inside to be revealed. The chevron is pointing upwards.

Anatomy

  1. Step timestamp (optional)
    Gives a precise indication about the time of the step. Allowing user to follow chronologically the timeline.
  2. Step title
    Indicate the name of the step. Use clear and concise labels to facilitate user's understanding (e.g.: delivery method, document upload)
  3. Chevron (optional)
    Informs the user about the state of the expandable step. Pointing down, the content is collapsed. Pointing up, the content is expanded.
    You have the possibility to open one by default.
  4. Step indicator
    Displays the step information via the color and the icon/numbers.
  5. Timeline bar
    Provides an additional hint about the progression, depending on its location.
  6. Step content (optional)
    If needed, content provides a space to fit in additional content and/or component for the user to interact with. It set as hidden in an expand/collapse.

Functional timeline statuses

5 statuses are available for the functional timeline:

  • Success
    The step is done.

  • On going
    The step is ongoing.
  • Pending
    The step is currently being process or in a waiting state.
  • Error
    The step requires an input from the user.
  • Inactive
    The step exists but hasn't started yet.

Reverted functional timeline

  1. Chronological timeline
    Displays chronological events to the user.

  2. Reverse chronological timeline
    Displays reverse chronological events to the user.


Best practise

  1. Make it start; make it end.
    The user must know when the process starts and when it ends. Therefore, when using a timeline, the component will always begin with a discus and end with another one.

  2. Anchors, anchors, anchors!
    Sometimes, the timeline will be bigger than the height of the screen. When accessing the page where the component is, try to use an anchor to allow the user to leapfrog to the latest step.


Related elements

Progress indicator vs. Timeline

Progress indicator offers an indicative information about the progression of the user within a multi step task. Whereas timeline is more adapted to offer the user an interactive set of elements to indicate a chronology of events. (e.g. tickets follow up, informative content about processes, etc.)

More infos about the progress indicator

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 12/07/2022 18:05:04

Structure

To build a timeline put a <div> with rs-tmline class.
Inside put an <ol> with rs-tmline-list class and inside this list a <li> with rs-tmline-item class.

Accessibility

  • rs-tmline div must have aria-label='breadcrumb' attribute;
  • The current rs-tmline-item must have rs-selected class and aria-current='page' attribute;
  • rs-tmline-indicator-el which has a number inside needs a second <span> with an explicite aria-label attribute.


Default steps

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum

Statuses steps

The steps of the timeline can be used with a status. To use a status, put the following classes with rs-tmline-item class. Take care that a status must have an appropriate icon instead of a number excepted for the ongoing status.

  • rs-done : done status
  • rs-selected : ongoing status
  • rs-warning : waiting status
  • rs-error : status who requires an input from the user

Icons

Put a i tag inside the rs-tmline-indicator-el element.

Accessibility

Put an explicite aria-label attribute with the status on the i tag.

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum

Reverted timeline

All timelines are available with reverted steps. Just add rs-tmline-inverted class on the <div> with the rs-tmline class.

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum

Informative steps

If you have a timeline who is only informative for the user with no current steps, you must use the rs-selected on all the steps.

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum

Clickable / Links

Accessibility

rs-tmline-title must have a type="button" attribute and must be a <button> instead of a <div> .


Steps with content

  1. Lorem Ipsum

    massa vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed urna dolor euismod non aliquam sit amet sodales sed ante. Aliquam et nibh at felis tempus tempus. Nam ac risus id velit hendrerit venenatis. Nullam ut erat nisi at porta ligula. Vestibulum a urna vitae risus ultrices iaculis varius ut erat. Donec et sapien mi. Maecenas sit amet lorem orci.Quisque nisl dolor aliquam non ultricies vel

  2. Lorem Ipsum

    massa vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed urna dolor euismod non aliquam sit amet sodales sed ante. Aliquam et nibh at felis tempus tempus. Nam ac risus id velit hendrerit venenatis. Nullam ut erat nisi at porta ligula. Vestibulum a urna vitae risus ultrices iaculis varius ut erat. Donec et sapien mi. Maecenas sit amet lorem orci.Quisque nisl dolor aliquam non ultricies vel


Steps with date

  1. 06 october 2021
  2. 06 october 2021
    Next step

    hendrerit venenatis. Nullam ut erat nisi at porta ligula. Vestibulum


Negative version

Simply add rs-tmline-neg to rs-tmline container.

Availability

Only these type of timeline are available:

  • Informative timeline;
  • Timeline with content;
  • Timeline with date.

  1. Lorem Ipsum
  2. 06 october 2021
    Lorem Ipsum

Accordion

Opened accordions

If you need an opened accordion by default, set aria-expanded on true in the button and aria-hidden on false in the accordion content.

Toggle accordion

Add jsrs-tmline jsrs-tmline-toggle classes around Timeline component.

Add jsrs-tmline-step on all step links <a> .

How does it work

Timeline accordion is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.timeline" attribute to work.

Changing visual

Follow same rules as for Toogle accordion.

Add data-step-image attribute with the img source to every step link <a> .

The <img> must have jsrs-tmline-visual class. JS will update it with the selected image step.

  1. Choose and order the Bizz Online package that fits your needs: from €15/month (excluding activation fees)

    I discover the Bizz Online solutions

    Need advice?Your Bizz Expert will call you


JavaScript

How to trigger the js

Each time you add timeline element to the page, you have to use this JS function inception.expandable(CONTEXT);

As Timeline accordion toggle is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Timeline accordion toggle to the page, you also have to call this JS: inception.timeline(CONTEXT);

CONTEXT refers to document or html element parent.