Coach Mark

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/coachmark@2.0.0

Variants#


Standard#
Contribution

<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>
Show markup

Quiet#
Contribution

<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>
Show markup

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.
<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">2 of 8</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="/spectrum-css/static/images/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">2 of 8</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>
Show markup