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

Lister

Lister benyttes til at repræsentere indhold i listeform. Lister kan være uordnede, ul, eller ordnede, ol. Derudover kan benyttes definitionslister dl, der kendetegnet ved at indeholde en definitionsterm og en definitionsbeskrivelse.

Klassen list benyttes til lister, der ikke bruges til menuer.

Uordnet liste

<ul class="list">
	<li>Listepunkt 1</li>
	<li>Listepunkt 2</li>
	<li>Listepunkt 3</li>
	<li>Listepunkt 4
		<ul>
			<li>4a</li>
			<li>4b</li>
			<li>4c</li>
			<li>4d</li>
		</ul>
	</li>
	<li>Listepunkt 1</li>
</ul>
  • Listepunkt 1
  • Listepunkt 2
  • Listepunkt 3
  • Listepunkt 4
    • 4a
    • 4b
    • 4c
    • 4d
  • Listepunkt 5

Uordnet inline-liste

Med klassen inlineer det muligt at lave en uordnet inline-liste.

<ul class="list inline">
	<li>Listepunkt 1</li>
	<li>Listepunkt 2</li>
	<li>Listepunkt 3</li>
	<li>Listepunkt 4</li>	
</ul>
  • Listepunkt 1
  • Listepunkt 2
  • Listepunkt 3
  • Listepunkt 4

Ordnet liste

<ol class="list">
	<li>Listepunkt 1</li>
	<li>Listepunkt 2</li>
	<li>Listepunkt 3</li>
	<li>Listepunkt 4
		<ol>
			<li>Listepunkt 4a</li>
			<li>Listepunkt 4b</li>
			<li>Listepunkt 4c</li>
			<li>Listepunkt 4d</li>
		</ol>
	</li>
	<li>Listepunkt 5</li>
</ol>
  1. Listepunkt 1
  2. Listepunkt 2
  3. Listepunkt 3
  4. Listepunkt 4
    1. Listepunkt 4a
    2. Listepunkt 4b
    3. Listepunkt 4c
    4. Listepunkt 4d
  5. Listepunkt 5

Definitionsliste

<dl class="list clearfix">
	<dt>Navn</dt>
	<dd>Karen Jensen</dd>
	<dt>Alder</dt>
	<dd>39</dd>
	<dt>Beskæftigelse</dt>
	<dd>Oversygeplejerske</dd>
	<dt>Børn</dt>
	<dd>Viggo</dd>
	<dd>Lise</dd>
</dl>
Navn
Karen Jensen
Alder
39
Beskæftigelse
Oversygeplejerske
Børn
Viggo
Lise