Gå til sidens indhold

Komponenter

Badges

Badges er grafiske markører, som du kan bruge til at gøre opmærksom på nyt eller vigtigt indhold.

<div class="container">
    <p class="h5">Stort badge</p>
    <label class="badge badge-large">Nyhed</label>

    <p class="h5">Lille badge</p>
    <label class="badge badge-small">Lille nyhed</label>
</div>

Alle badges skal have en .badge class på <label></label> elementet.

Badges findes i to størrelser, store og små:

  • For et stort badge skal der tilføjes en .badge-large class.

  • For et lille badge skal der tilføjes en .badge-small class.

Et stort badge vil se følgende ud:

  • <label class="badge badge-large"My badge</label>

Et lille badge vil se følgende ud:

  • <label class="badge badge-small"My badge</label>

Tilgængelighed

  • Interaktive badges bliver automatisk markeret , når brugere ved hjælp af tabulatortasten navigerer sig frem til dem.
  • Du skal anvende ARIA live regions til at gøre skærmlæsere på opmærksomme på ændringerne, hvis du anvender badges dynamisk i løsningen til at gøre opmærksom på nyt indlæst indhold eller ændringer på siden.

Brugervenlighed

Anvendes til

  • Brug badges til at gøre opmærksom på ændringer, nyt eller vigtigt indhold.

Anvendes ikke til

  • Brug ikke badge, hvis placeringen af det får brugeren til at tro, det er en knap. Test altid for dette, når du vil anvende badges.
  • Overvej at markere ændringer på siden ved at markere selve det ændrede fx med en baggrundsfarve eller en typografisk markering som fx fed tekst.
  • Brug ikke badge på sider, hvor indholdet bliver udskiftet dynamisk. Fx på nyhedssider, hvor brugeren nemt kan se, hvad der er det nyeste indhold, når det blot står øverst.

Vejledning

  • Brug ord og begreber, som brugeren kan genkendes fra løsningen.
  • Skriv badges med store bogstaver.
  • Brug ikke hover, focus eller active styling til et badge, som ikke er interaktivt (fx link).
  • Bland aldrig interaktive og statiske badges i samme løsning. Brugerne forventer ensartet opførsel af komponenterne inden for løsningen.
  • Vær varsom med at markere for meget indhold med badges – brug dem kun, hvor det virkelig er meningsfuldt.