Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Sider kan struktureres, så de også fungerer godt ved print.
CSS-klasser
DKFDS giver nogle værktøjer, så man nemt kan tilpasse sider til print. Ved at tilføje visse klasser kan du vise, skjule eller ændre udseende på elementer ved print.
Derved kan du skjule eller vise visse elementer på siden, som enten ikke er relevante, eller kun relevante ved print. I browseren vil man dog ikke kunne se ændringen.
| CSS klasse | Beskrivelse |
|---|---|
| d-print-none | Skjuler element ved print |
| d-print-inline | Tilføjer display: inline; ved print |
| d-print-inline-block | Tilføjer display: inline-block; ved print |
| d-print-block | Tilføjer display: block; ved print |
| d-print-table | Tilføjer display: table; ved print |
| d-print-table-row | Tilføjer display: table-row; ved print |
| d-print-table-cell | Tilføjer display: table-cell; ved print |
| d-print-flex | Tilføjer display: flex; ved print |
| d-print-inline-flex | Tilføjer display: inline-flex; ved print |
Eksempler på skjul af elementer
Nogle elementer er ikke relevant ved print, derfor anbefaler vi at skjule dem ved print. Dette gøres ved at tilføje klassen d-print-none på elementet.
Man sparer både plads og blæk, når man skjuler elementer, der ikke er relevate. Derudover giver det også et bedre overblik, når kun de nødvendige informationer vises.
Vi har udvalgt nogle eksempelløsninger, hvor du kan se eksempler på dette.
Knapper
Knapper har ingen funktion på print, hvorfor vi anbefaler at man skjuler knappen.
Eksempler
- Formular til kontaktoplysninger: Kvittering
- Trinformular til ansøgning: Kvittering
- Sagsoversigt: Sagsnr. 123456789
Header
I headeren bør kun de højst nødvendige informationer vises. Menuen, links og knapper er ikke relevante, bliver derfor skjult.
Hvis du har kontaktinformationer stående både i headeren og footeren bør én af dem skjules, da det ikke er nødvendigt at bruge plads på den samme information flere steder.
Eksempler
- Header med navigation og søgefelt
- Formular til kontaktoplysninger: Oplysninger om dig
- Trinformular til registrering: Vælg personer
Footer
Nogle elementer i footeren kan være relevante ved print, så som kontaktoplysninger, men andre, så som privatlivspolitik eller andre links, er ikke relevante, da de ikke virker på print. Derfor anbefaler vi at man skjuler dem.
Eksempler
- Simpel footer
- Footer med tre kolonner
- Footer med fire kolonner
- Kompleks footer
- Footer med logo
- Formular til kontaktoplysninger: Oplysninger om dig
Responsiv tabel
I nogle tilfælde, hvis man bruger en responsiv tabel, giver det mening at tabellen ikke er responsiv, når det kommer til print.
Hvis man ønsker at tabellen skal forblive normal ved print, kan man tilføje klassen d-print-table til table elementet.