Components

Walkthrough

Walkthrough components are used to provide an interactive and educational prospect experience for setup.

HeaderHeader › DefaultHeader › Tour Menu OpenHeaderdev ready

Preview

Code

<div class="slds-trial-header slds-grid">
  <div class="slds-grid">
    <button class="slds-button slds-m-right--small">Take the salesforce tour</button>
    <div class="slds-grid slds-dropdown-trigger slds-dropdown-trigger--click">
      <button class="slds-button" aria-haspopup="true">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
        </svg>Choose your tour</button>
      <div class="slds-dropdown slds-dropdown--inverse slds-dropdown--left">
        <ul class="slds-dropdown__list" role="menu">
          <li class="slds-dropdown__item slds-is-selected" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="0">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-m-right--x-small" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                </svg>
                <span class="slds-assistive-text">Completed:</span> Conquer Your Cases</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-m-right--x-small" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                </svg>Automate For Speed</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-m-right--x-small" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                </svg>Share Your Knowledge</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-m-right--x-small" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                </svg>Finish it up in a Flash</span>
            </a>
          </li>
          <li class="slds-has-divider--top-space" role="separator"></li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--x-small slds-m-right--x-small" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
                </svg>Import Contacts and Accounts</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="slds-grid slds-grid--vertical-align-center slds-col--bump-left">
    <span class="slds-box slds-box--xx-small slds-theme--default">30</span>
    <span class="slds-m-horizontal--x-small">Days left in trial</span><a href="javascript:void(0);" class="slds-button slds-button--success">Subscribe Now</a></div>
</div>

PopoversPopovers › DefaultPopovers › Micro SetupPopovers › Micro Setup - AlternatePopovers › Micro Setup - In PagePopovers › Micro Setup - Inline FormPopovers › Action PopoverPopoversdev ready

Preview

Code

<section class="slds-popover slds-popover--walkthrough slds-nubbin--left" role="dialog" aria-labelledby="dialog-heading-id-2404" aria-describedby="dialog-body-id-2405">
  <button class="slds-button slds-button--icon-small slds-float--right slds-popover__close slds-button--icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Close dialog</span>
  </button>
  <header class="slds-popover__header slds-p-vertical--small">
    <h2 id="dialog-heading-id-2404" class="slds-text-heading--small">Manage your channels</h2>
  </header>
  <div class="slds-popover__body" id="dialog-body-id-2405">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <footer class="slds-popover__footer">
    <div class="slds-grid slds-grid--vertical-align-center slds-p-vertical--x-small">
      <span class="slds-text-title">Step 2 of 4</span>
      <button class="slds-button slds-button--brand slds-col--bump-left">Next</button>
    </div>
  </footer>
</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-trial-header
Applied to:

<div>

Outcome:

Sets styles for trial header bar

Required:

Required

Comments:

--

.slds-popover--walkthrough
Applied to:

.slds-popover

Outcome:

Sets styles for walkthrough specific popovers

Required:

Required

Comments:

--