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

Coach mark

Component status
Contribution
Current version@spectrum-css/coachmark@7.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/coachmark@8.0.0-s2-foundations.17
ReleasedOctober 4, 2024

Variants


Standard
Contribution

Try playing with a pixel brush
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
Try playing with a pixel brush

Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
Show markup
<div class="spectrum-Examples-item" style="height: 300px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</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 class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="spectrum-Examples-item" style="height: 250px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
        <div class="spectrum-CoachMark-action-menu">

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-menu is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionButton--quiet spectrum-CoachMark-menu--mobile is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <br>
          <div class="spectrum-Popover spectrum-Popover--bottom is-open">
            <ul class="spectrum-Menu" role="menu">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Skip tour</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Reset tour</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</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 class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

With Media
Contribution

Try playing with a pixel brush
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
Try playing with a pixel brush

Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
Show markup
<div class="spectrum-Examples-item" style="height: 500px; width: auto;">
  <div class="spectrum-CoachMark">

    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-image-wrapper">
        <img class="spectrum-CoachMark-image" src="img/example-card-landscape.jpeg" />
      </div>
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>

      <div class="spectrum-CoachMark-footer">
        <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</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 class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="spectrum-Examples-item" style="height: 500px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-image-wrapper">
        <img class="spectrum-CoachMark-image" src="img/example-card-landscape.jpeg" />
      </div>
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
        <div class="spectrum-CoachMark-action-menu">

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-menu is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionButton--quiet spectrum-CoachMark-menu--mobile is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <br>
          <div class="spectrum-Popover spectrum-Popover--bottom is-open">
            <ul class="spectrum-Menu" role="menu">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Skip tour</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Reset tour</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</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 class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Migration Guide


  • Coach Mark is now a seperate component from Coach Indicator