- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Coach Mark
Component status | Verified |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/coachmark@5.0.45 |
Variants
StandardContribution
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>
QuietContribution
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>
PopoverContribution
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>