Kampmann Styleguide

Implementieren von Badges

Es wird ein <span> tag mit der Klasse badge und einer der kontextuellen Klassen (s. u.) wie badge--primary angelegt. Die Größe von Badges passen sich der Größe eines Elternelements an.

ready

      <h1>Überschrift<span class="badge badge--primary">Neu</span></h1>
<h1>Überschrift<span class="badge badge--success">Neu</span></h1>
<h1>Überschrift<span class="badge badge--info">Neu</span></h1>
<h1>Überschrift<span class="badge badge--warning">Neu</span></h1>
<h1>Überschrift<span class="badge badge--error">Neu</span></h1>

      @import "bootstrap/scss/mixins.scss";
@import "bootstrap/scss/badge.scss";

.badge {
  margin: 0 10px;
  font-weight: 500;
  border-radius: $border-radius-full;

  &--primary {
    background-color: $blue;
  }

  &--success {
    background-color: $green;
  }

  &--info {
    background-color: $teal;
  }

  &--warning {
    background-color: $yellow;
  }

  &--error {
    background-color: $red;
  }
}

.btn .badge {
  margin: 0;
  margin-left: 10px;
}

ready

      
  <div>
    <span class="badge badge--primary">24</span>
    <span class="badge badge--success">24</span>
    <span class="badge badge--info">24</span>
    <span class="badge badge--warning">24</span>
    <span class="badge badge--error">24</span>
  </div>

  <a href="javascript:void(0)" class="btn btn--outline-primary">
    Benachrichtigungen
    <span class="badge badge--info">24</span>
  </a>
</div>
<!-- norender -->
{{ page.inlinestyles }}

      @import "bootstrap/scss/mixins.scss";
@import "bootstrap/scss/badge.scss";

.badge {
  margin: 0 10px;
  font-weight: 500;
  border-radius: $border-radius-full;

  &--primary {
    background-color: $blue;
  }

  &--success {
    background-color: $green;
  }

  &--info {
    background-color: $teal;
  }

  &--warning {
    background-color: $yellow;
  }

  &--error {
    background-color: $red;
  }
}

.btn .badge {
  margin: 0;
  margin-left: 10px;
}