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

Coach Mark

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/coachmark@3.0.0-beta.5

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--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--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button 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--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button 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--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button 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>