Design

Feature Highlights are used to draw attention to a new feature in the UI. When clicked, they open a Dropdown with more information about the new feature.

Only one Feature Highlight should be used on any given view or screen.

New Feature!A new feature that users should know about

To highlight a feature that isn't visible on page load, use the highlight on the element that will reveal it. For example, a new item in a Dropdown:

New Feature!

Code

Example Element Code
New Feature! Non-interactive Feature Highlight. Can be composed with other elements to create interactivity. 

                                                                                          <span class="ace-feature-highlight"><span class="ace-feature-highlight-throbber"></span><span class="ace-text ace-assistive">New Feature!</span></span>

                                                                                      p.ace-p See ACECLASSIC-36 for status.
New Feature! Feature Highlight with associated dropdown. Remember you can use the ^ syntax to close a Dropdown with a button inside the Dropdown. 

                                                                                          <a class="ace-feature-highlight" href="#" data-ace-dropdown-trigger="IDOFDROPDOWN"><span class="ace-feature-highlight-throbber"></span><span class="ace-text ace-assistive">New Feature!</span></a>

Dropdown, for ease of reference:


                                                                                          <div class="ace-dropdown" id="highlightdropdown">
                                                                                                <div class="ace-dropdown-content">
                                                                                                      <div class="ace-dropdown-content-group">
                                                                                                            <div class="ace-dropdown-panel"> 
                                                                                                              <p class="ace-p">This is an amazing new feature that will change your life.</p>
                                                                                                            </div>
                                                                                                            <div class="ace-button-group ace-button-group-separate">
                                                                                                                  <button class="ace-button ace-button-link" data-ace-dropdown-trigger="^" type="button"><span>Got it</span></button>
                                                                                                            </div>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </div>
p.ace-p See ACECLASSIC-36 for status.