ACE Labs feature: this element is under development and the API is not bound by SemVer. Watch the changelog!

Design

The Metaline and Metabar show contextually relevant metadata; for example related activity or priority levels. Both are intended for use with text and text links but not for larger controls like buttons.

Metaline is a simple sentence with key content triggering progressive reveal of content in dropdowns, dialogs and so on.

Assigned yesterday to Kim Smith.

Assigned yesterday to Kim Smith and 3 others.

The Metabar has more structure, for showing discrete-but-related content:

  • Low priority
  • Assigned 20 hours ago to Kim Smith.

Code

Example Description Code

Assigned yesterday to Kim Smith.

Metaline uses a paragraph element. 

                                                                                          <p class="ace-metaline">Contents of Metaline.
                                                                                          </p>

ASP support to be added: ACECLASSIC-42
  • Low priority
  • Assigned 20 hours ago to Kim Smith.
Metabar uses a list. 

                                                                                          <ul class="ace-metabar">
                                                                                                <li>Low priority
                                                                                                </li>
                                                                                                <li>Assigned <strong class="ace-strong">20 hours ago</strong> to  <a class="ace-link" data-ace-dropdown-trigger="kimsmith" href="mailto:[email protected]">Kim Smith</a>.
                                                                                                </li>
                                                                                          </ul>

ASP support to be added: ACECLASSIC-42