Components

Activity Timeline

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

BaseBasedev ready

Preview

Code

<ul>
  <li>
    <span class="slds-assistive-text">Task</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--task">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-task" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <div class="slds-media">
              <div class="slds-media__figure">
                <label class="slds-checkbox" for="mark-complete">
                  <input type="checkbox" name="checkbox" id="mark-complete" />
                  <span class="slds-checkbox--faux"></span>
                  <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                </label>
              </div>
              <div class="slds-media__body">
                <h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this"><a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a></h3>
                <ul class="slds-list--horizontal slds-wrap">
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Contact:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
                  </li>
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Assigned to:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Task, Review proposals</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Event</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--event">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-event" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Company One — EBC Meeting"><a href="javascript:void(0);">Company One — EBC Meeting</a></h3>
            <p class="slds-truncate">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Time:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Location:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">300 Pike St, San Francisco CA</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a>, <a href="javascript:void(0);">Jason Dewar</a>, <a href="javascript:void(0);">Gwen Jones</a> and <a href="javascript:void(0);">Pete Schaffer</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Event, Company One</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Call</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--call">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-log-a-call" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Lei seemed interested in closing this deal quickly! Let’s move.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Assigned to:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--email">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-email" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-truncate_container--50 slds-m-right--large slds-grid">
                <span class="slds-text-title">To:</span>
                <span class="slds-text-body--small slds-m-left--xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a></span>
                <span class="slds-no-flex slds-text-body--small"> + 44 more</span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">From:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
</ul>

CallCall › DefaultCalldev ready

Preview

Code

<span class="slds-assistive-text">Call</span>
<div class="slds-media">
  <div class="slds-media__body">
    <div class="slds-media slds-media--timeline slds-timeline__media--call">
      <div class="slds-media__figure slds-timeline__icon">
        <div class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-standard-log-a-call" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
          </svg>
        </div>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
        <p class="slds-truncate" title="Lei seemed interested in closing this deal quickly! Let’s move.">Lei seemed interested in closing this deal quickly! Let’s move.</p>
        <ul class="slds-list--horizontal slds-wrap">
          <li class="slds-m-right--large">
            <span class="slds-text-title">Name:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
          </li>
          <li class="slds-m-right--large">
            <span class="slds-text-title">Assigned to:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="slds-media__figure slds-media__figure--reverse">
    <div class="slds-timeline__actions">
      <p class="slds-timeline__date">Feb 24</p>
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
      </button>
    </div>
  </div>
</div>

EmailEmail › DefaultEmaildev ready

Preview

Code

<span class="slds-assistive-text">Email</span>
<div class="slds-media">
  <div class="slds-media__body">
    <div class="slds-media slds-media--timeline slds-timeline__media--email">
      <div class="slds-media__figure slds-timeline__icon">
        <div class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-standard-email" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
          </svg>
        </div>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
        <p class="slds-truncate" title="Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
        <ul class="slds-list--horizontal slds-wrap">
          <li class="slds-truncate_container--50 slds-m-right--large slds-grid">
            <span class="slds-text-title">To:</span>
            <span class="slds-text-body--small slds-m-left--xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a></span>
            <span class="slds-no-flex slds-text-body--small"> + 44 more</span>
          </li>
          <li class="slds-m-right--large">
            <span class="slds-text-title">From:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="slds-media__figure slds-media__figure--reverse">
    <div class="slds-timeline__actions">
      <p class="slds-timeline__date">Feb 24</p>
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
      </button>
    </div>
  </div>
</div>

EventEvent › DefaultEventdev ready

Preview

Code

<span class="slds-assistive-text">Event</span>
<div class="slds-media">
  <div class="slds-media__body">
    <div class="slds-media slds-media--timeline slds-timeline__media--event">
      <div class="slds-media__figure slds-timeline__icon">
        <div class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-standard-event" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
          </svg>
        </div>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="Company One — EBC Meeting"><a href="javascript:void(0);">Company One — EBC Meeting</a></h3>
        <p class="slds-truncate" title="Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
        <ul class="slds-list--horizontal slds-wrap">
          <li class="slds-m-right--large">
            <span class="slds-text-title">Time:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a></span>
          </li>
          <li class="slds-m-right--large">
            <span class="slds-text-title">Location:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">300 Pike St, San Francisco CA</a></span>
          </li>
          <li class="slds-m-right--large">
            <span class="slds-text-title">Name:</span>
            <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a>, <a href="javascript:void(0);">Jason Dewar</a>, <a href="javascript:void(0);">Gwen Jones</a> and <a href="javascript:void(0);">Pete Schaffer</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="slds-media__figure slds-media__figure--reverse">
    <div class="slds-timeline__actions">
      <p class="slds-timeline__date">Feb 24</p>
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options for Event, Company One</span>
      </button>
    </div>
  </div>
</div>

TaskTask › DefaultTaskdev ready

Preview

Code

<span class="slds-assistive-text">Task</span>
<div class="slds-media">
  <div class="slds-media__body">
    <div class="slds-media slds-media--timeline slds-timeline__media--task">
      <div class="slds-media__figure slds-timeline__icon">
        <div class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-standard-task" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
          </svg>
        </div>
      </div>
      <div class="slds-media__body">
        <div class="slds-media">
          <div class="slds-media__figure">
            <label class="slds-checkbox" for="mark-complete">
              <input type="checkbox" name="checkbox" id="mark-complete" />
              <span class="slds-checkbox--faux"></span>
              <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
            </label>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this"><a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a></h3>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Contact:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Assigned to:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-media__figure slds-media__figure--reverse">
    <div class="slds-timeline__actions">
      <p class="slds-timeline__date">Feb 24</p>
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options for Task, Review proposals</span>
      </button>
    </div>
  </div>
</div>

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create activity timeline.
Class NameUsage
.slds-media--timeline
Applied to:

.slds-media

Outcome:

Applies the left border and bottom padding

Required:

Required

Comments:

--

.slds-timeline__media--call
Applied to:

.slds-media--timeline

Outcome:

Gives the left border a unique color to match the call icon

Required:

No, optional element or modifier

Comments:

--

.slds-timeline__media--email
Applied to:

.slds-media--timeline

Outcome:

Gives the left border a unique color to match the email icon

Required:

No, optional element or modifier

Comments:

--

.slds-timeline__media--event
Applied to:

.slds-media--timeline

Outcome:

Gives the left border a unique color to match the event icon

Required:

No, optional element or modifier

Comments:

--

.slds-timeline__media--task
Applied to:

.slds-media--timeline

Outcome:

Gives the left border a unique color to match the task icon

Required:

No, optional element or modifier

Comments:

--

.slds-timeline__actions
Applied to:

div

Outcome:

Container for date and button icon on the right of a timeline item

Required:

Required

Comments:

This is directly inside the .slds-media--reverse > .slds-media__figure

.slds-timeline__date
Applied to:

p

Outcome:

Styles the date inside .slds-timeline__actions

Required:

Required

Comments:

--

.slds-timeline__icon
Applied to:

svg

Outcome:

Adds the thick white border around the icon which is used to cover the timeline rules.

Required:

Required

Comments:

This is added to the icon inside the .slds-media__figure in .slds-media--timeline

.slds-timeline
Deprecated
Applied to:

ul

Outcome:

Defines the overall timeline component

Required:

No, optional element or modifier

Comments:

By default icons have a white fill color

.slds-timeline__item
Deprecated
Applied to:

li

Outcome:

Deprecated. Defines each item on the timeline

Required:

No, optional element or modifier

Comments:

--