Kode

Badges

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

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:

• Grøn, som er succesfarven og implementeres med klassen badge-success.
• Blå, som er informationsfarven og implementeres med klassen badge-info.
• Gul, som er advarselsfarven og implementeres med klassen badge-warning.
• Rød, som er fejlfarven og implementeres med klassen badge-error.

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