Kode

Strukturerede lister

Åbn dette eksempel i et nyt vindue

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

Vis dette eksempel i et nyt vindue

<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>