Components

Process

A process component communicates to the user the progress of a particular process.

Sales Path CoachSales Path Coach › Without CoachingSales Path Coach › With Coaching AvailableSales Path Coach › Current Stage Coaching VisibleSales Path Coach › With Different Stage SelectedSales Path Coach › LostSales Path Coach › WonSales Path Coachdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-grid">
  <div class="slds-tabs--path" role="application">
    <ul class="slds-tabs--path__nav" role="tablist">
      <li class="slds-tabs--path__item slds-is-complete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-91" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
            <span class="slds-assistive-text">Stage Complete</span>
          </span>
          <span class="slds-tabs--path__title">Contacted</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-complete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-92" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
            <span class="slds-assistive-text">Stage Complete</span>
          </span>
          <span class="slds-tabs--path__title">Open</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-current" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-93" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Unqualified</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-94" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Nurturing</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-95" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Closed</span>
        </a>
      </li>
    </ul>
  </div>
  <button class="slds-button slds-button--brand slds-path__mark-complete slds-no-flex slds-m-horizontal--small">
    <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>Mark Status as Complete</button>
</div>

Open coaching content section.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tabs--path
Applied to:

<div>

Outcome:

Initializes default tabset

Required:

Required

Comments:

--

.slds-tabs--path__nav
Applied to:

<ul>

Outcome:

Creates the container for the default tabs

Required:

Required

Comments:

--

.slds-tabs--path__item
Applied to:

<li>

Outcome:

Styles each list item as a single tab

Required:

Required

Comments:

--

.slds-tabs--path__link
Applied to:

<a>

Outcome:

Styles each <a> element in the <li>

Required:

Required

Comments:

--

.slds-tabs--path__content
Applied to:

<div>

Outcome:

Styles each tab content wrapper

Required:

Required

Comments:

--

.slds-tabs--path__stage
Applied to:

<span>

Outcome:

Contains the check mark when the stage is completed

Required:

Required

Comments:

This class is only required in the sales path tabs and is contained inside the .slds-tabs--path__link

.slds-tabs--path__title
Applied to:

<span>

Outcome:

Contains the name of the stage

Required:

Required

Comments:

This class is only required in the sales path tabs and is contained inside the .slds-tabs--path__link

.slds-is-complete
Applied to:

.slds-tabs--path__item

Outcome:

Creates the completed stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-current
Applied to:

.slds-tabs--path__item

Outcome:

Creates the current stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-incomplete
Applied to:

.slds-tabs--path__item

Outcome:

Creates the incomplete stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-active
Applied to:

.slds-tabs--path__item

Outcome:

Creates the active stage of the sales path

Required:

No, optional element or modifier

Comments:

This class must be placed on the item programatically when the guidance section is used

.slds-wizard
Applied to:

<div>

Outcome:

Initializes popover

Required:

Required

Comments:

--

.slds-wizard__list
Applied to:

<ol>

Outcome:

An ordered list containing steps of a process

Required:

Required

Comments:

--

.slds-wizard__item
Applied to:

<li>

Outcome:

A list item for each step of the process

Required:

Required

Comments:

--

.slds-wizard__link
Applied to:

<a>

Outcome:

Hyperlink of the list item, user can jump between steps

Required:

Required

Comments:

--

.slds-wizard__marker
Applied to:

<span>

Outcome:

Dot indicator for each step

Required:

Required

Comments:

--

.slds-wizard__label
Applied to:

<span class="slds-text-heading--label>

Outcome:

Text description for each step

Required:

Required

Comments:

--

.slds-wizard__progress
Applied to:

<span>

Outcome:

Container for progress bar

Required:

Required

Comments:

<span> sits outside of <ol>

.slds-wizard__progress-bar
Applied to:

<span>

Outcome:

Bar showcasing which step of the process a user is on

Required:

Required

Comments:

Inline width styles should be modified with JavaScript

.slds-is-active
Applied to:

slds-wizard__item

Outcome:

Stateful class that turns dot indicator and progress bar blue

Required:

Required

Comments:

Class should be applied through JavaScript