Component Blueprints

Activity Timeline

The activity timeline displays each of the user’s upcoming, current, and past activities.

About Activity Timeline#

Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar.

Accessibility#

Text describing the type of timeline item is placed in a span. It is the first element in the timeline item and should be hidden with the slds-assistive-text class. The SVG image does not need the slds-assistive-text class.

Markup#

Button:

  • aria-controls is used to create an association between the button and the details section. If the details section has an id="email-content", then the button should have aria-controls="email-content".
  • The title of the timeline item can also be used as a button to open the details section. If the details section has an id="email-content", then the div with slds-timeline__trigger should have aria-controls="email-content" and the click handler.
  • aria-expanded indicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.

Section:

  • aria-hidden indicates if the details section is open or closed, and if set to true, assistive technology hides the details section.

Keyboard Interactions#

  • The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.

Base#

<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item_expandable slds-timeline__item_task">
      <span class="slds-assistive-text">task</span>

States#

Expanding sections#

Accessibility Note

When the user interacts with the button to open the details section, aria-expanded on the button should be true and aria-hidden on the details section should be false.

When the user interacts with the button to close the details section, aria-expanded on the button should be false and aria-hidden on the details section should be true.

Single Item Expanded#

<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item_expandable slds-timeline__item_task slds-is-open">
      <span class="slds-assistive-text">task</span>

Multiple Items Expanded#

<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item_expandable slds-timeline__item_task slds-is-open">
      <span class="slds-assistive-text">task</span>

Error#

<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item_expandable slds-timeline__item_task slds-is-open">
      <span class="slds-assistive-text">task</span>

Narrow Region Example#

<div class="demo-only" style="width:400px">
  <ul class="slds-timeline">
    <li>
      <div class="slds-timeline__item_expandable slds-timeline__item_task slds-is-open">

Overview of CSS Classes#

Selector.slds-timeline
Summary

Initializes activity timeline

Supportdev-ready
Restrictul
VariantTrue
Selector.slds-timeline__item_expandable
Summary

Create each expandable activity timeline item in a list

Restrict.slds-timeline div
Selector.slds-timeline__item_details
Summary

Class to show and hide details

Restrict.slds-timeline__item_expandable article
Selector.slds-is-open
Summary

Toggles the visibility of the timeline item

Restrict.slds-timeline__item_expandable
ModifierTrue
Selector.slds-timeline__item_call
Summary

Applies line connector for a call timeline item

Restrict.slds-timeline__item_expandable
Selector.slds-timeline__item_email
Summary

Applies line connector for an email timeline item

Restrict.slds-timeline__item_expandable
Selector.slds-timeline__item_event
Summary

Applies line connector for an event timeline item

Restrict.slds-timeline__item_expandable
Selector.slds-timeline__item_task
Summary

Applies line connector for a task timeline item

Restrict.slds-timeline__item_expandable
Selector.slds-timeline__icon
Summary

Icon associated with timeline item

Restrict.slds-timeline__item_expandable .slds-icon_container
Selector.slds-timeline__details-action-icon
Summary

Icon inside of actionable button within an expandable timeline item

Restrict.slds-timeline__item_expandable svg

Activity Timeline Release Notes