include ./helpers

h1.example__header Badges

.row
  .column--quarter
    span.header--small Badge
    p.content--small.
      Highlights component with a label to draw attention to it. Used on notifications icon to display number of unread messages.
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div class="row" style="justify-content:space-around;">
        <div class="box background--dark" style="position:relative">
          <div class="badge">3</div>
        </div>
        <div class="box background--dark" style="position:relative">
          <div class="badge">1000</div>
        </div>
      </div>
    label.label Result
    .row(style="justify-content:space-around;")
      .box.background--dark(style="position:relative")
        .badge 3
      .box.background--dark(style="position:relative")
        .badge 1000