Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


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 tastaturet navigerer sig frem til dem.

Du skal anvende ARIA live regions til at gøre skærmlæsere 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.