Merker

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

På denne siden

Eksempler

Merkene skaleres for å matche størrelsen på det umiddelbare overordnede elementet ved å bruke relativ skriftstørrelse og emenheter. Fra og med v5 har ikke merkene lenger fokus eller svevestiler for linker.

Overskrifter

Eksempel overskriftNy

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

Knapper

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 bg-secondary">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.

Plassert

Bruk verktøy for å endre en .badgeog plassere den i hjørnet av en lenke eller knapp.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Du kan også erstatte .badgeklassen med noen flere verktøy uten å telle for en mer generisk indikator.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Bakgrunnsfarger

Bruk våre bakgrunnsverktøyklasser for raskt å endre utseendet til et merke. Vær oppmerksom på at når du bruker Bootstraps standard .bg-light, vil du sannsynligvis trenge et tekstfargeverktøy som .text-darkfor riktig styling. Dette er fordi bakgrunnsverktøy ikke angir noe annet enn background-color.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenklassen.

Pillemerker

Bruk .rounded-pillbruksklassen til å gjøre merkene mer avrundede med en større border-radius.

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

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

Sass

Variabler

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;