Komponenter

Komponenterne i designsystemet er genanvendelige enheder, der kan sættes sammen på mange forskellige måder, i forskellige mønstre, for at bygge de selvbetjeningsløsninger, dine brugere har brug for.

• Accordions

  Accordions bruges til at skjule og vise indhold.

• Anchorlinks

  Anchorlinks linker til bestemte steder på samme side.

• Badges

  Badges er bruges til at gøre opmærksom på nyt eller vigtigt indhold.

• Beskeder

  Beskeder anvendes til at fremhæve aktuel information, som er vigtig for brugeren.

• Brødkrumme

  Brødkrummen bruges til at vise brugerne, hvor i løsningen de befinder sig.

• Cards

  Cards afgrænser indhold eller interaktionselementer, der omhandler samme emne.

• Cookiemeddelelse

  Anvendes cookies til andet end teknisk nødvendige formål, skal der vises en cookiemeddelelse.

• Datofelter

  Tre separate felter for dag, måned og år.

• Datovælger

  Ét felt med knap, hvor man kan vælge en dato.

• Detaljer

  Detaljekomponenten holder indhold skjult, indtil brugeren folder det ud.

• Dropdown

  Dropdown lader brugeren vælge én blandt flere muligheder i en udfoldet liste.

• Faneblade (tabs)

  Faneblade lader brugeren bladre imellem relaterede sektioner af indhold.

• Fejlmeddelelser

  Fejlmeddelelser hjælper brugeren med at udfylde enkelte formularelementer korrekt.

• Fejlopsummering

  Fejlopsummeringer giver overblik over fejl eller mangler, der skal rettes på en side.

• Footer

  Footeren markerer enden på siden og guider brugeren videre.

• Funktionslink

  Funktionslink lader brugeren udføre forskellige systemfunktionaliteter.

• Gå til sidens indhold (skip-link)

  Et skjult link, der lader brugeren springe menuen over, når de navigerer med tastaturet.

• Header

  Headeren identificerer portal, ansvarlig myndighed og bruger. Headeren fungerer også til navigation.

• Inputfelter

  Inputfelter lader brugeren indtaste kort information.

• Knapper (Buttons)

  Knapper lader brugeren udføre centrale funktioner.

• Loading spinner

  En spinner viser brugeren, at indlæsningen af en side eller delfunktion er forsinket.

• Modal

  Modaler tvinger brugeren til at fokusere på én ting, mens den øvrige side er deaktiveret.

• Overflow menu

  Overflow menuer viser og skjuler en liste af links eller funktioner.

• Paginering

  Paginering bruges til at navigere mellem indhold, der er opdelt på flere sider.

• Radioknap

  Radioknapper lader brugeren vælge én blandt flere muligheder.

• Sprogvælger

  Sprogvælgeren lader brugeren vælge et andet sprog end løsningens standardsprog.

• Søgefelt

  Søgefeltet lader brugeren søge efter bestemt indhold på siden eller i løsningen.

• Tabeller

  Tabeller er en systematisk opstilling af data i kolonner og rækker.

• Tags

  Et tag er en mindre knap, som angiver metainformation om indhold.

• Tekstområde

  Tekstområder lader brugeren indtaste en længere tekst på flere linjer.

• Tilbage-link

  Tilbage-linket lader brugeren gå tilbage til forrige trin eller side i en selvbetjeningsløsning.

• Tilbage til toppen

  Tilbage til toppen-knappen lader brugeren navigere nemt til toppen af en lang side.

• Tjekboks

  Tjekbokse lader brugeren vælge en eller flere muligheder.

• Toastbesked

  Toastbeskeder viser aktuel information og dukker op i det øjeblik, de bliver relevante.

• Toggle switch

  En toggle switch er en digital tænd/sluk-knap, hvis effekt træder i kraft med det samme.

• Tooltip

  Tooltips giver brugeren kort, forklarende information om specifikke elementer på siden.

• Trinindikator

  Trinindikator fører brugeren igennem en kendt sekvens af trin i en løsning.

• Vedhæft fil

  Komponenten lader brugeren tilføje og indsende en fil.

• Venstremenu

  Venstremenuen strukturerer et navigationshierarki med op til tre niveauer i en vertikal liste.

Hvis du mangler en komponent

Vi stræber efter, at Det Fælles Designsystem skal imødekomme de gængse behov for selvbetjeningsløsninger på borger.dk og Virk. Det kan selvfølgelig ske, at netop din løsning har brug for en komponenttype, som (endnu) ikke findes i designsystemet. I så fald kan det være nødvendigt at udvikle komponenten selv.

Hvis der udvikles en ny komponent, skal den passe visuelt til Det Fælles Designsystem, og den skal efterleve designets grundprincipper og kravene til tilgængelighed. Husk også at brugerteste løsningen for at være sikre på, at brugerne forstår og kan anvende den nye komponent.

Hvis du mener, der mangler en gængs komponent, som ville kunne bruges i flere løsninger, kan du kontakte os for at anmode om, at den tilføjes til Det Fælles Designsystem.