Gå til sidens indhold

Vælg et tema

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


Kode

Strukturerede lister

Navn
Kirsten Mønster Jensen
Sagsnummer
123.456
Dato
04/05/2011
Beskrivelse
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="container">
    <div class="row row-bordered no-gutters">
        <div class="col-md-4 weight-semibold">
            Navn
        </div>
        <div class="col-md-8">
            Kirsten Mønster Jensen
        </div>
    </div>
    <div class="row row-bordered no-gutters">
        <div class="col-md-4 weight-semibold">
            Sagsnummer
        </div>
        <div class="col-md-8">
            123.456
        </div>
    </div>
    <div class="row row-bordered no-gutters">
        <div class="col-md-4 weight-semibold">
            Dato
        </div>
        <div class="col-md-8">
            04/05/2011
        </div>
    </div>
    <div class="row row-bordered no-gutters">
        <div class="col-md-4 weight-semibold">
            Beskrivelse
        </div>
        <div class="col-md-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>

Tilføj klasserne no-gutters or row-bordered til row-elementet. Kan bruges i forbindelse med opsummering eller kvitteringssider som alternativ til en tabel, hvis der ingen headers er.

Strukturerede lister gør brug af designsystemets grid, for mere vejledning om implementering se derfor under grid

Varianter

Struktureret liste med redigér

<div class="container">
    <div class="row row-bordered no-gutters">
        <div class="col-12 col-md-4 weight-semibold">
            Navn
        </div>
        <div class="col-12 col-md-6">
            Kirsten Mønster Jensen
        </div>
        <div class="col-12 col-md-2 align-text-md-right">
            <a href="#">Redigér<span class="sr-only"> navn</span></a>
        </div>
    </div>
    <div class="row row-bordered no-gutters">
        <div class="col-12 col-md-4 weight-semibold">
            E-mail
        </div>
        <div class="col-12 col-md-6">
            kirstenjensen@eksempel.dk
        </div>
        <div class="col-12 col-md-2 align-text-md-right">
            <a href="#">Redigér<span class="sr-only"> e-mail</span></a>
        </div>
    </div>
    <div class="row row-bordered no-gutters">
        <div class="col-12 col-md-4 weight-semibold">
            Telefonnummer
        </div>
        <div class="col-12 col-md-6">
            12 34 56 78
        </div>
        <div class="col-12 col-md-2 align-text-md-right">
            <a href="#">Redigér<span class="sr-only">
                    telefonnummer</span></a>
        </div>
    </div>
</div>