Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

Lister

Lister bruges til at organisere information, så det giver brugeren overblik.

Åbn dette eksempel i et nyt vindue: lists
Eksempel på lister

Punktopstilling

  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
    • Unordered list
    • Unordered list
    • Unordered list
      • Unordered list
      • Unordered list
      • Unordered list

Tegnopstilling

  1. Ordered list
  2. Ordered list
  3. Ordered list
  4. Ordered list
    1. Ordered list
    2. Ordered list
    3. Ordered list
      1. Ordered list
      2. Ordered list
      3. Ordered list

Sådan bruges lister

Anvendes til

Brug lister, når du skal liste ord eller sætninger op.

Brug lister til at give brugeren et hurtigt overblik.

Anvendes ikke til

Lister af lange afsnit med forklarende tekst. Brug mellemrum i stedet.

Vejledning

Hold listerne så korte og faktuelle som muligt.

Brug tal i listerne, når der er et hierarki i det, du præsenterer.

Ved brug af tal, hold da listen til så få niveauer som muligt - og hvis muligt under 3 niveauer.

Brug punkter, når der ikke er et hierarki i informationerne.

Punktopstilling

HTML Struktur

Kodeeksempel
<ul>

    <li>Unordered list</li>

    <li>Unordered list</li>

    <li>Unordered list</li>

    <li>Unordered list<ul>

            <li>Unordered list</li>

            <li>Unordered list</li>

            <li>Unordered list<ul>

                    <li>Unordered list</li>

                    <li>Unordered list</li>

                    <li>Unordered list</li>

                </ul>
            </li>

        </ul>
    </li>

</ul>

Tegnopstilling

HTML Struktur

Kodeeksempel
<ol>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit<ol type="a">
            <li>Amet</li>
            <li>Consectetur</li>
            <li>Adipiscing<ol type="i">
                    <li>Elit</li>
                    <li>Nam</li>
                    <li>Nisl</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>