Activity Timeline

Activity Timeline

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Task</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_task">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-task" title="task">
                <svg class="slds-icon slds-icon_small" 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">
                  <span class="slds-checkbox">
                    <input type="checkbox" name="options" id="checkbox-351" />
                    <label class="slds-checkbox__label" for="checkbox-351">
                      <span class="slds-checkbox_faux"></span>
                      <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                    </label>
                  </span>
                </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 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>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Event</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_event">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-event" title="event">
                <svg class="slds-icon slds-icon_small" 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 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>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Call</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_call">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-log-a-call" title="call">
                <svg class="slds-icon slds-icon_small" 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 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>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Email</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_email">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-email" title="email">
                <svg class="slds-icon slds-icon_small" 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 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>
    </div>
  </li>
</ul>

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.


Overview of CSS Classes

Selector.slds-timeline__media
Summary

Create each activity timeline item in a list

Supportdev-ready
Restrict.slds-media
VariantTrue
Selector.slds-timeline__title
Summary
Restrict.slds-timeline__media h3
Selector.slds-timeline__icon
Summary

Icon associated with timeline item

Restrict.slds-timeline__media .slds-media__figure
Selector.slds-timeline__media_call
Summary
Restrict.slds-timeline__media
VariantTrue
Selector.slds-timeline__media_email
Summary
Restrict.slds-timeline__media
VariantTrue
Selector.slds-timeline__media_event
Summary
Restrict.slds-timeline__media
VariantTrue
Selector.slds-timeline__media_task
Summary
Restrict.slds-timeline__media
VariantTrue