• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Coach Mark

Component status
Verified
Last releasedUnreleased
Current version@spectrum-css/coachmark@3.0.3-alpha.1

Variants


Standard
Contribution

Show markup
<div class="spectrum-CoachMarkIndicator" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Popover
Contribution

Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Show markup
<div style="position: relative;">
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="position: absolute;">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover" style="position: absolute; margin-left: 34px;">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary">
        <span>Okay</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 250px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkPopover">
    <img src="img/example-ava.jpg" class="spectrum-CoachMarkPopover-image" />

    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step"><bdo dir="ltr">2 of 8</bdo></div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>

  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

No results found

Try another search term.