Den Haag Design System

Badge: Default 

<br />
<h1>Titel 1 <span class="badge badge--default">Inhoud badge</span></h1>
<hr>
<h2>Titel 2 <span class="badge badge--default">Inhoud badge</span></h2>
<hr>
<h3>Titel 3 <span class="badge badge--default">Inhoud badge</span></h3>
<hr>
<h4>Titel 4 <span class="badge badge--default">Inhoud badge</span></h4>
<hr>
<span class="badge badge--default">badge text content</span>
<hr>
 
<br />
<h1>Titel 1 <span class="badge badge--default">Inhoud badge</span></h1>
<hr>
<h2>Titel 2 <span class="badge badge--default">Inhoud badge</span></h2>
<hr>
<h3>Titel 3 <span class="badge badge--default">Inhoud badge</span></h3>
<hr>
<h4>Titel 4 <span class="badge badge--default">Inhoud badge</span></h4>
<hr>
<span class="badge badge--default">badge text content</span>
<hr>
 
/* No context defined for this component. */
  • Content: 
    .badge {
  display: inline-block;
  padding: $space-xxs $space-xs;
  font-size: $fs-down-1;
  font-weight: $fw-medium;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 5px;

  // Colors
  &--default {
    color: $grey-dark;
    background-color: $grey-light;
  }
  &--informative {
    color: $badge-blue-dark;
    background-color: $badge-blue;
  }
  &--success {
    color: $badge-green-dark;
    background-color: $badge-green;
  }
  &--attention {
    color: $badge-yellow-dark;
    background-color: $badge-yellow;
  }
  &--critical {
    color: $badge-red-dark;
    background-color: $badge-red;
  }
}

h1,h2,h3,h4,h5,h6 {
  .badge {
    font-weight: $fw-bold;
  }
}

h1,h2 {
  .badge {
    padding: $space-xs $space-s;
  }
}
  • URL: /components/raw/badge/badge.scss
  • Filesystem Path: src/components/01-componenten/badge/badge.scss
  • Size: 813 Bytes

We delen de badges op in de volgende 5 classes:

  1. Default Dit is de standaardbadge die we al gebruiken. Deze willen we standaard gebruiken, tenzij het in een specifieke use-case valt.
  1. Informative Dit is een badge die wordt gebruikt om informatie te communiceren.
  1. Success Dit is een badge die wordt gebruikt om een succesvolle, voltooide of wenselijke state aan te geven.
  1. Attention Dit is een badge die wordt gebruikt om de aandacht van de gebruikers te trekken en die mogelijke acties vereisen.
  1. Critical Dit is een badge waar kritieke en onomkeerbare problemen voorkomen en wordt gebruikt om de aandacht van de gebruikers te trekken en die mogelijke actie vereist.