Gå til sidens indhold

Vælg et tema

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


Kode

Badges

Eksempel på badge komponent
Nyhed

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<span class="badge badge-large">Nyhed</span>

Alle badges skal have en badge klasse på <span>-elementet.

Hvis et badge anvendes til særlig fræmhævning af et ord i en kontekst, for eksempel når nyt indhold markeres på en side, anvend da et <strong>-element i stedet for <span>.

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.