Harris Schneiderman edited this page Jun 9, 2017 · 1 revision

Badges

What is needed?

For badges to be formatted properly there a couple necessary things.

  • The proper badge class ("dqpl-badge-error", "dqpl-badge-success", "dqpl.badge-warning", or "dqpl-badge-tag") which will act as the wrapping element for the icon and text within a badge.
  • The proper icon class on the dqpl-icon child...
    • for error badges: "fa fa.ban"
    • for success badges: "fa fa-check-circle"
    • for warning badges: "fa fa-warning"
    • for tag badges: "fa fa-tag"
  • The proper class on the child element with the badge's text: "dqpl-badge-text"

Example HTML

<div class="dqpl-badge-error">
  <div class="dqpl-icon fa fa-ban" aria-label="Error"></div>
  <div class="dqpl-badge-text">error</div>
</div>
<div class="dqpl-badge-success">
  <div class="dqpl-icon fa fa-check-circle" aria-label="Success"></div>
  <div class="dqpl-badge-text">complete</div>
</div>
<div class="dqpl-badge-warning">
  <div class="dqpl-icon fa fa-warning" aria-label="Warning"></div>
  <div class="dqpl-badge-text">warning</div>
</div>
<div class="dqpl-badge-tag">
  <div class="dqpl-icon fa fa-tag" aria-label="Tag"></div>
  <div class="dqpl-badge-text">a tag</div>
</div>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.