Gå til sidens indhold

Design

Print

Sider kan struktureres, så de også fungerer godt ved print

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

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

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

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.

Eksempler