• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Coach Mark

Component status
Verified
Last releasedMay 23, 2023
Current version@spectrum-css/coachmark@5.0.45
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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--outline spectrum-Button--primary">
        <span class="spectrum-Button-label">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--outline spectrum-Button--secondary">
        <span class="spectrum-Button-label">Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
        <span class="spectrum-Button-label">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--outline spectrum-Button--secondary">
        <span class="spectrum-Button-label">Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
        <span class="spectrum-Button-label">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--outline spectrum-Button--secondary">
        <span class="spectrum-Button-label">Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
        <span class="spectrum-Button-label">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>