Badges

Badges with an icon

There are several contextual badges with an icon.

.c-badge (normal)

.c-badge--primary

.c-badge--notification

.c-badge--success

.c-badge--warning

.c-badge--error

.c-badge
  i.kzicon.kzicon-wrench-small

.c-badge--primary
  i.kzicon.kzicon-check

.c-badge--notification
  i.kzicon.kzicon-text

.c-badge--success
  i.kzicon.kzicon-check

.c-badge--warning
  i.kzicon.kzicon-alert

.c-badge--error
  i.kzicon.kzicon-cancel

.c-badge--error
  i.kzicon.kzicon-minus

<div class="c-badge">
  <i class="kzicon kzicon-wrench-small"></i>
</div>
<div class="c-badge--primary">
  <i class="kzicon kzicon-check"></i>
</div>
<div class="c-badge--notification">
  <i class="kzicon kzicon-text"></i>
</div>
<div class="c-badge--success">
  <i class="kzicon kzicon-check"></i>
</div>
<div class="c-badge--warning">
  <i class="kzicon kzicon-alert"></i>
</div>
<div class="c-badge--error">
  <i class="kzicon kzicon-cancel"></i>
</div>
<div class="c-badge--error">
  <i class="kzicon kzicon-minus"></i>
</div>

if you want to show a badge and its label, use .c-badge-label for the label.

Primary goal

Cancel

Delete

.c-badge--success
  i.kzicon.kzicon-check
.c-badge-label Primary goal

.c-badge--error
  i.kzicon.kzicon-cancel
.c-badge-label Cancel

.c-badge--error
  i.kzicon.kzicon-minus
.c-badge-label Delete

<div class="c-badge--success">
  <i class="kzicon kzicon-check"></i>
</div>
<div class="c-badge-label">
  Primary goal
</div>
<div class="c-badge--error">
  <i class="kzicon kzicon-cancel"></i>
</div>
<div class="c-badge-label">
  Cancel
</div>
<div class="c-badge--error">
  <i class="kzicon kzicon-minus"></i>
</div>
<div class="c-badge-label">
  Delete
</div>

Sizes

Add .-size-large or .-size-larger to enlarge a badge.

Primary goal

p
  .c-badge.-size-large
    i.kzicon.kzicon-wrench-small

  .c-badge--notification.-size-large
    i.kzicon.kzicon-text

  .c-badge--success.-size-large
    i.kzicon.kzicon-check

  .c-badge--error.-size-large
    i.kzicon.kzicon-cancel
p
  .c-badge--success.-size-large
    i.kzicon.kzicon-check
  .c-badge-label Primary goal

p
  .c-badge.-size-larger
    i.kzicon.kzicon-wrench-small

  .c-badge--notification.-size-larger
    i.kzicon.kzicon-text

  .c-badge--success.-size-larger
    i.kzicon.kzicon-check

  .c-badge--error.-size-larger
    i.kzicon.kzicon-cancel
p
  .c-badge--success.-size-larger
    i.kzicon.kzicon-check
  .c-badge-label Primary goal

<p>
  <div class="c-badge -size-large">
    <i class="kzicon kzicon-wrench-small"></i>
  </div>
  <div class="c-badge--notification -size-large">
    <i class="kzicon kzicon-text"></i>
  </div>
  <div class="c-badge--success -size-large">
    <i class="kzicon kzicon-check"></i>
  </div>
  <div class="c-badge--error -size-large">
    <i class="kzicon kzicon-cancel"></i>
  </div>
</p>
<p>
  <div class="c-badge--success -size-large">
    <i class="kzicon kzicon-check"></i>
  </div>
  <div class="c-badge-label">
    Primary goal
  </div>
</p>
<p>
  <div class="c-badge -size-larger">
    <i class="kzicon kzicon-wrench-small"></i>
  </div>
  <div class="c-badge--notification -size-larger">
    <i class="kzicon kzicon-text"></i>
  </div>
  <div class="c-badge--success -size-larger">
    <i class="kzicon kzicon-check"></i>
  </div>
  <div class="c-badge--error -size-larger">
    <i class="kzicon kzicon-cancel"></i>
  </div>
</p>
<p>
  <div class="c-badge--success -size-larger">
    <i class="kzicon kzicon-check"></i>
  </div>
  <div class="c-badge-label">
    Primary goal
  </div>
</p>

Shape

Use .-shape-square to square the badge.

.c-badge.-size-larger.-shape-square
  i.kzicon.kzicon-file-default

<div class="c-badge -size-larger -shape-square">
  <i class="kzicon kzicon-file-default"></i>
</div>