Gå til sidens indhold

Kode

Badges

Eksempler og retningslinjer

Installation

HTML Struktur

<label class="badge badge-large">Nyhed</label>

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

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.

Varianter

Stort badge

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

Lille badge

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

Statusbadges

Statusbadges har 4 forskellige farver og formål:

  • , som er succesfarven og implementeres med klassen badge-success.
  • , som er informationsfarven og implementeres med klassen badge-info.
  • , som er advarselsfarven og implementeres med klassen badge-warning.
  • , som er fejlfarven og implementeres med klassen badge-error.

Se eksempel på anvendelse af statusbadges i vores release notes.