Merker

Dokumentasjon og eksempler for merker, vår liten telling og merkekomponent.

Eksempel

Merkene skaleres for å matche størrelsen på det umiddelbare overordnede elementet ved å bruke relativ skriftstørrelse og emenheter.

Eksempel overskriftNy

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Merker kan brukes som en del av lenker eller knapper for å gi en teller.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Merk at avhengig av hvordan de brukes, kan merkene være forvirrende for brukere av skjermlesere og lignende hjelpeteknologier. Mens utformingen av merkene gir et visuelt pekepinn på formålet, vil disse brukerne ganske enkelt bli presentert med innholdet på merket. Avhengig av den spesifikke situasjonen kan disse merkene virke som tilfeldige tilleggsord eller tall på slutten av en setning, lenke eller knapp.

Med mindre konteksten er klar (som med «Varslinger»-eksemplet, der det forstås at «4» er antall varsler), bør du vurdere å inkludere ekstra kontekst med et visuelt skjult stykke tilleggstekst.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstuelle variasjoner

Legg til en av de nedenfor nevnte modifikasjonsklassene for å endre utseendet til et merke.

Hoved Sekundær Suksess Fare Advarsel Info Lys Mørk

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Formidle mening til hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.

Pillemerker

Bruk .badge-pillmodifikasjonsklassen for å gjøre merkene mer avrundede (med en større border-radiusog ekstra horisontal padding). Nyttig hvis du savner merkene fra v3.

Hoved Sekundær Suksess Fare Advarsel Info Lys Mørk

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Linker

Bruk av kontekstuelle .badge-*klasser på et <a>element gir raskt handlingsvennlige merker med sveve- og fokustilstander.

Hoved Sekundær Suksess Fare Advarsel Info Lys Mørk

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>