HTML-guide til udvikling af integrationsløsninger til Borger.dk

Forløbsindikator

Hvis en løsning er opdelt i forskellige registreringstrin, kan dette vises med en forløbsindikator. En forløbsindikator giver et visuelt overblik over, hvor i forløbet en bruger befinder sig, og hvor mange trin brugeren mangler for at gennemføre forløbet.

Forløbsindikatoren kan anvendes enten horisontalt eller vertikalt.

Forløbet ligger i en fast rækkefølge, som brugeren følger. Visuelt er det altid tydeligt, hvilket trin brugeren er i gang med, hvilke der er gennemførte, og hvilke der mangler. Klassen done angiver færdiggjorte trin. Klassen current angiver det nuværende trin, mens final benyttes på sidste trin.

Klasserne title-step og description-step gør det muligt at styre indholdet på de enkelte trin. Det er tilladt kun benytte at benytte den ene af klasserne.

Vandret forløbsindikator

En vandret forløbsindikator skal altid være placeret øverst.

På små skærme fungerer en vandret forløbsindikator som en lodret forløbsindikator.

<ol class="indicator-horisontal indicator clearfix">
	<li class="done">
		<div class="title-step">Indtast stamoplysninger</div>
		<div class="description-step">Indtast dit navn, alder</div>
	</li>
	<li class="current">
		<div class="title-step">Udfyld ansøgning</div>
		<div class="description-step">Udfyld felterne</div>
	</li>
	<li>
		<div class="title-step">Bekræft oplysninger</div>
		<div class="description-step">Bekræft at oplysninger er korrekte</div>
	</li>
	<li class="final">
		<div class="title-step">Kvittering</div>
		<div class="description-step">Print en kvittering eller send den til din email</div>
	</li>
</ol>
  1. Indtast stamoplysninger
    Indtast dit navn, alder
  2. Udfyld ansøgning
    Udfyld felterne
  3. Bekræft oplysninger
    Bekræft at oplysninger er korrekte
  4. Kvittering
    Print en kvittering eller send den til din email

Alternativ vandret forløbsindikator

I nogle løsninger - eksempelvis løsninger med mange trin - kan det være hensigtsmæssigt at kunne styre bredden på trinene. Hertil kan benyttes klasserne indicator-horisontal-flow-XX, hvor XX kan være tallene 50, 60, 70, 80, 90 eller 100, som angiver trinbredden i pixels - eksempelvis indicator-horisontal-flow-80.

En alternativ lodret forløbsindikator forbliver lodret på små skærme.

<ol class=" indicator-horisontal-flow-80 indicator clearfix">
	<li class="done">
		<div class="title-step">Oplysninger</div>
	</li>
	<li class="current">
		<div class="title-step">Ansøgning</div>
	</li>
	<li>
		<div class="title-step">Bekræft</div>
	</li>
	<li class="final">
		<div class="title-step">Kvittering</div>
	</li>
</ol>
  1. Oplysninger
  2. Ansøgning
  3. Bekræft
  4. Kvittering

Lodret forløbsindikator

En lodret forløbsindikator skal altid være placeret til venstre.

<ol class="indicator-vertical indicator">
	<li class="done">
		<div class="title-step">Indtast stamoplysninger</div>
		<div class="description-step">Indtast dit navn, alder</div>
	</li>
	<li class="current">
		<div class="title-step">Udfyld ansøgning</div>
		<div class="description-step">Udfyld felterne</div>
	</li>
	<li>
		<div class="title-step">Bekræft oplysninger</div>
		<div class="description-step">Bekræft at oplysninger er korrekte</div>
	</li>
	<li class="final">
		<div class="title-step">Kvittering</div>
		<div class="description-step">Print en kvittering eller send den til din email</div>
	</li>
</ol>
  1. Indtast stamoplysninger
    Indtast dit navn, alder
  2. Udfyld ansøgning
    Udfyld felterne
  3. Bekræft oplysninger
    Bekræft at oplysninger er korrekte
  4. Kvittering
    Print en kvittering eller send den til din email

Forkortede forløbsindikatorer

Det kan være hensigtsmæssigt visuelt at forkorte forløbsindikatorer, hvis de består af mange trin. Det er muligt visuelt at forkorte et forløb på to måder: Med harmonikeffekt eller med trunkering.

En oplagt metode kan være med javscript at styre trunkering/harmonikaeffekt, så denne bliver aktiv på eksempelvis små skærme. Den tekst, der er angivet på de enkelte trinene bevares i DOM'en, selvom den ikke kan ses.

Harmonikaeffekt

Med klassen hidden-step kan et eller flere trin visuelt forkortes.

<ol class=" indicator-horisontal-flow-70 indicator clearfix">
	<li class="done" >
		<div class="title-step">Start</div>
	</li>
	<li class="current">
		<div class="title-step">Udrejse</div>
	</li>
	<li class="hidden-step">
		<div class="title-step">Indrejse</div>
	</li>
	<li class="hidden-step">
		<div class="title-step">Kontakt</div>
	</li>
	<li class="hidden-step">
		<div class="title-step">Bekræft</div>
	</li>
	<li class="final">
		<div class="title-step">Kvittering</div>
	</li>
</ol>
  1. Udrejse
  2. Indrejse
  3. Kontakt
  4. Bekræft
  5. Kvittering

Trunkering

Suppleres klassen hidden-step med klassen hidden-flow opnås en trunkeringseffekt.

<ol class="indicator-horisontal indicator clearfix">
	<li class="done">
	<li class="done">
		<div class="title-step">Trin 1</div>
		<div class="description-step">Start</div>
	</li>
	<li class="current">
		<div class="title-step">Trin 2</div>
		<div class="description-step">Udrejse</div>
	</li>
	<li class="hidden-step hidden-flow">
		<div class="title-step">Trin 3</div>
		<div class="description-step">Indrejse</div>
	</li>
	<li class="hidden-step hidden-flow">
		<div class="title-step">Trin 3</div>
		<div class="description-step">Kontakt</div>
	</li>
	<li class="hidden-step hidden-flow">
		<div class="title-step">Trin 5</div>
		<div class="description-step">Bekræft</div>
	</li>
	<li class="final">
		<div class="title-step">Trin 6</div>
		<div class="description-step">Kvittering</div>
	</li>
</ol>
  1. Trin 1
    Start
  2. Trin 2
    Udrejse
  3. Trin 3
    Indrejse
  4. Trin 3
    Kontakt
  5. Trin 5
    Bekræft
  6. Trin 6
    Kvittering