Typografi

Farver

Formularer og inputfelter

Inputfelter til formularer er allerede stylet for dig. Du skal ikke gøre noget særligt ud over at bruge korrekt HTML.

Layout

Herunder kan du finde flere detaljer om, hvordan du nemt laver layouts i SDFI-stil.

Vi har lavet nogle eksempler, hvor du kan se forskellige layout-teknikker i praksis.

• Se simpelt layout-eksempel
• Se avanceret layout-eksempel (med ikoner, etc.)

Kolonner og grids

Lav et simpelt kolonne-layout ved at tilføje ds-grid class til det element, der indeholder de elementer, som skal vises i kolonner.

Se demo

Fleksible kolonner

Hvis boksene gerne må bruge den plads, der er til rådighed, så kan du bruge ds-flexgrid class i stedet.

Se demo

Primære/sekundære kolonner

Brug class .ds-grid-2-1 på elementet udenom, når du vil vise to elementer som hhv. primær og sekundær kolonne.

Se demo

Brug class .ds-grid-1-2 hvis rækkefølgen skal være omvendt.

Se demo

Indholds-containere

Hvis du skal vise noget indhold i én kolonne midt i skærmen, så sæt ds-container class på elementet. Indholdet i denne tekst er centreret med class ds-container

Se demo

Simpel rækkevisning

Brug class ds-flex-row, hvis du blot vil vise to elementer ved siden af hinanden, og de skal være centreret i højden.
F.eks.:

En knap Et tekstelement

    <p class="ds-flex-row">
      <button>En knap</button>
      <span>Et tekstelement</span>
    </p>
  

Indvendig afstand / padding

Du kan sætte den korrekte padding ved at bruge class ds-padding i HTML.

<div class="ds-padding"> ... </div>

Se demo

Indhold med ds-padding omkring sig.

Hvis du skal bruge den officielle padding i CSS, kan du bruge CSS custom property --padding.

.my-custom-class {
    padding: var(--padding);
  }

Specielle paddings

Du kan sætte en class med en specifik padding til særlige indrykninger o.l.

Du kan bygge en specifik class ved at kombinere:

1. ds-pt, ds-pb, ds-pl, ds-pr for hhv. padding-top, padding-bottom, padding-left og padding-right
2. -xxs, -xs, -sm, -md, -lg, -xl, -xxl for den størrelse padding, du ønsker

En class ds-pb-sm vil således give en padding-bottom: 0.5rem

Det samme resultat kan opnås ved at bruge CSS custom properties: style="padding-bottom: var(--space-sm);"

Når elementer skal flugte med hinanden

Når tekst og elementer med runde kanter (ikoner, knapper, etc.) står sammen, skal teksten og de runde elementer rykkes lidt i forhold til hinanden. Det er for at modvirke et optisk fænomen, hvor det ser ud som om, at de ikke står på linie.

Du kan gøre det ved at give teksten lidt ekstra padding med ds-optical-padding class ELLER give ikoner/knapper en justeringsmargin.

    <p class="ds-optical-padding">Her er din tekst</p>
    <button>En knap</button>
  

    <p>Her er din tekst</p>
    <button class="ds-optical-margin">En knap</button>
  

Her kan du også bruge CSS custom properties --optical-padding og --optical-margin til mere specialiserede layouts.

Udvendig afstand / margin

Du kan sætte den korrekte margin ved at bruge class ds-margin i HTML.

<div class="ds-margin"> ... </div>

Se demo

Indhold med ds-margin omkring sig

Hvis du skal bruge den officielle margin i CSS, kan du bruge CSS custom property --margin.

.my-custom-class {
    margin: var(--margin);
  }

Specielle margins

Du kan sætte en class med en specifik margin til særlige indrykninger o.l.

Du kan bygge en specifik class ved at kombinere:

1. ds-mt, ds-mb, ds-ml, ds-mr for hhv. margin-top, margin-bottom, margin-left og margin-right
2. -xxs, -xs, -sm, -md, -lg, -xl, -xxl for den størrelse margin, du ønsker

En class ds-mr-lg vil således give en margin-right: 2rem

Det samme resultat kan opnås ved at bruge CSS custom properties: style="margin-right: var(--space-lg);"

Navigationselementer

Navigationselementer laves med <nav> elementet.

Tabs

Laves ved at tilføje class ds-nav-tabs

Herunder er tabs i en mere simpel version.

Tab-komponent

Tab-komponenten laver automatisk en række indholdselementer om til tabbed elementer, når du omslutter dem med <ds-tabs></ds-tabs>

Ikoner

Hvis du vil bruge SDFI-ikoner og logoer, skal du importere og indlejre NPM-pakken @dataforsyningen/icons

Ikoner kan indlejres som SVG eller importeres og indlejres som baggrundsbilleder i CSS, så du bare skal sætte en class ds-icon-* på et element for at bruge dem.

F.eks.

• <span class="ds-icon-sider-icon-privatliv"></span>
• <span class="ds-icon-sider-icon-terms"></span>
• <span class="ds-icon-sider-icon-user"></span>
• <span class="ds-icon-some-linkedin"></span>

Logo

Bemærk! SDFIs logo må kun bruges af Styrelsen for Dataforsyning og Infrastruktur.

Logoer skal indlejres på samme måde som ikoner, før du kan bruge dem. Enten som SVG-filer eller via CSS:

    
@import "@dataforsyningen/icons/css/logo-micro.css";
@import "@dataforsyningen/icons/css/logo-normal.css";
    
  

Sæt class ds-logo på et element for at vise SDFIs bomærke. Det kan f.eks. være på et link-element som vist herunder.

Logo fås i en mindre udgave ved at bruge class ds-logo-micro

Hvis logo skal kunne ændre størrelse ift. skærmstørrelse, så brug ds-logo-responsive

Nogle gange skal logo trækkes lidt til venstre for at få kronen til at være på linie med venstre kant af indholdet. Det gøres nemt ved at sætte ds-logo-pull-left på logo-elementet.

Favicon/bogmærkeikon

Som favicon bruges logo-simple-micro.svg

For at bruge det skal du indsætte denne linie i HTML <head> sektionen. Sørg for at "path" svarer til logofilens placering på serveren.

<link rel="shortcut icon" href="path/logo-simple-micro.svg">

Denne fil følger med i @dataforsyningen/css pakken under
/node-modules/@dataforsyningen/css/assets/logos/logo-simple-micro.svg

Produktkort/cards

Produktkort og cards laves nemt ved at sætte class ds-card på et element. Det første <img> element i et ds-card bliver altid vist som hovedbilledet.

Produktkort titel

Dette er et produktkort/card.

Produktkort titel

Dette er et produktkort/card.

Billeder og figurer

Billeder indsættes med img-elementet.

Man kan vise et billede som figur med beskrivelse ved at bruge figure og figcaption sammen med billeder.

Tabeller

Tabeller kræver intet særligt, da de allerede er stylet som default. Du skal blot bruge korrekt HTML.

Lister

Definition list

Dialogboks

Skjult panel

Loading spinner

Popover

Toast

API checker (Datafordeler checker)