Dokumentation og eksempler til badges, vores lille tæller og mærkningskomponent.
Eksempel
Badges skaleres til at matche størrelsen af det umiddelbare overordnede element ved at bruge relativ skriftstørrelse og emenheder.
Eksempel overskriftNy
Eksempel overskriftNy
Eksempel overskriftNy
Eksempel overskriftNy
Eksempel overskriftNy
Eksempel overskriftNy
Badges kan bruges som en del af links eller knapper til at give en tæller.
Bemærk, at afhængigt af hvordan de bruges, kan badges være forvirrende for brugere af skærmlæsere og lignende hjælpeteknologier. Mens stylingen af badges giver et visuelt fingerpeg om deres formål, vil disse brugere blot blive præsenteret for indholdet af badget. Afhængigt af den specifikke situation kan disse badges virke som tilfældige ekstra ord eller tal i slutningen af en sætning, et link eller en knap.
Medmindre konteksten er klar (som med eksemplet "Notifikationer", hvor det forstås, at "4" er antallet af notifikationer), skal du overveje at inkludere yderligere kontekst med et visuelt skjult stykke ekstra tekst.
Kontekstuelle variationer
Tilføj en af de nedenfor nævnte modifikationsklasser for at ændre udseendet af et badge.
PrimærSekundærSuccesFareAdvarselInfoLysMørk
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-onlyklassen.
Pillemærker
Brug .badge-pillmodifikationsklassen til at gøre badges mere afrundede (med en større border-radiusog yderligere vandret padding). Nyttigt, hvis du savner badges fra v3.
PrimærSekundærSuccesFareAdvarselInfoLysMørk
Links
Brug af de kontekstuelle .badge-*klasser på et <a>element giver hurtigt brugbare badges med svæve- og fokustilstande.