badges

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>