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>