Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Badges
Badges er grafiske markører, som du kan bruge til at gøre opmærksom på nyt eller vigtigt indhold.
Sådan bruges komponenten
Anvendes til
Brug badges til at gøre opmærksom på ændringer, nyt eller vigtigt indhold.
Anvendes ikke til
Brug ikke badge, hvis placeringen af det får brugeren til at tro, det er en knap. Test altid for dette, når du vil anvende badges.
Brug ikke badges på sider, hvor indholdet bliver udskiftet dynamisk. Fx på nyhedssider, hvor brugeren nemt kan se, hvad der er det nyeste indhold, når det blot står øverst.
Vejledning
Brug ord og begreber, som brugeren kan genkende fra løsningen.
Vær varsom med at markere for meget indhold med badges – brug dem kun, hvor det virkelig er meningsfuldt.
Varianter
Statusbadges
Se komponenten i eksempelløsninger
Referencer
Natasha Postolovski: What Is The Most Underrated Word In Web Design? (2014)
Installation
HTML Struktur
<strong class="badge">Badge</strong>Både <span> og <strong> kan anvendes til badges. Hvis et badge anvendes til særlig fræmhævning af et ord i en kontekst, brug da <strong>.
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.