### Code Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/_includes/code/syntax.html A general code example for a component. ```html {% if include.component and include.component != '' %} {% if include.link %} {% if include.url %} [Vis dette eksempel i et nyt vindue: {{ include.component }}](/eksempel/{{ include.url }}/) {% else %} [Vis dette eksempel i et nyt vindue: {{ include.component }}](/eksempel/{{ include.component }}/) {% endif %} {% endif %} {% if include.title %} {{ include.title }} {% else %} Kodeeksempel {% endif %} {% if include.copybutton %} Kopiér kode {% endif %} {% capture _syntax %} {% highlight html %} {% include code/components/{{ include.component }}.{{ include.language | default: 'html' }} %} {% endhighlight %} {% endcapture %}{{ _syntax | markdownify }} {% if include.guidelines and include.guidelines != '' %} [Gå til eksemplets retningslinjer]({{include.guidelines}}) {% endif %} {% endif %} ``` -------------------------------- ### Example of badges Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/komponenter/badges/index.html An example demonstrating the usage of badges. ```html
Badge
``` -------------------------------- ### Layout Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/2-styleguide/7-layout/layout.md Example of a row with columns, demonstrating layout structure. ```html

Gør det let at skimme indholdet

Lad fx overskrifter, labels, brødtekst, inputfelter og primærknap flugte til venstre ned ad siden, så øjets flugt primært foregår i en bevægelse op og ned ad siden (i én kolonne). Placer så vidt som muligt det vigtigste indhold øverst.

Grafisk visning af en side som er let at skimme

Gør løsningen let og luftigt

Dvs. gør god brug af “luft” (white space). Det gør sidens indhold lettere at overskue og forstå.

Grafisk visning af en side med luft mellem indholdet

Vis hvad der hænger sammen med hvad

Skab fx klare gestalter: Placer elementer, der hører sammen, tættere på hinanden, og adskil/fjern elementer, der ikke hører sammen, fra hinanden.

Grafisk visning af en side med tydelig gruppering af indholdet

Del indholdet op i små bidder

Gør layoutet overskueligt ved at dele løsningen eller siden op i mindre bidder. Fx et spørgsmål pr. side i en trinbaseret løsning. Brug overskrifter, underoverskrifter og lister til at skabe overskuelighed på teksttunge sider.

Grafisk visning af en løsning opdelt i flere trin

Brug et responsivt grid

Brug et grid-system til fx til at styre dit layout. Grid skaber struktur i informationer. Responsivt grid tilpasser sig desuden skærmformatet.

{% include links/internal-link.html linktext="Grid’et i designsystemet" %}

{% include links/internal-link.html linktext="Eksempler på selvbetjeningsløsninger" %}

{% include links/internal-link.html linktext="Eksempler på templates" %}

Grafisk visning af en side opbygget efter et gridsystem
``` -------------------------------- ### Opgaveliste Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/4-eksempler/3-templates/opgaveliste/opgaveliste.html Example of a task list. ```html {% include code/demo.html component="example-opgaveliste" %} ``` -------------------------------- ### Opsummering Template Examples Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/4-eksempler/3-templates/templates.md Examples of how to include navigation cards for summary templates. ```html ``` -------------------------------- ### Install project dependencies Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/README.md Installs project dependencies for the documentation site. ```sh npm install ``` -------------------------------- ### Opgaveliste Template Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/4-eksempler/3-templates/templates.md Example of how to include a navigation card for an task list template. ```html ``` -------------------------------- ### Example Contained Layout Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/_layouts/example-contained.html This is an example of a contained layout. ```html {% include head.html %} {% include code/components/fds-base-svg.html %} [Gå til sidens indhold](#main-content) {% if page.title contains "Toastbesked" or page.title contains "toastbesked" %} {{ content }} {% assign pageTitle = page.title | downcase %}{% if pageTitle == page.filename %}{{ page.filename | replace: "-", " " | capitalize }}{% else %}{{ page.title }}{% endif %} ========================================================================================================================================================================== {% else %} {% assign pageTitle = page.title | downcase %}{% if pageTitle == page.filename %}{{ page.filename | replace: "-", " " | capitalize }}{% else %}{{ page.title }}{% endif %} ========================================================================================================================================================================== {{ content }} {% endif %} {% include scripts.html %} ``` -------------------------------- ### Start local development server Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/README.md Starts a local development server to view the documentation site. ```sh npm start ``` -------------------------------- ### Update screenshots of pages in example sites Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/README.md Runs the example-dumps.js script to update screenshots of pages in example sites. ```sh node example-dumps.js ``` -------------------------------- ### Example Usage in Markdown Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/_includes/links/component-guideline-link.html This is an example of how to use the include in a Markdown file to generate a link to a component guideline. ```Liquid {%- comment -%} -------- EXAMPLE: HOW TO USE IN MARKDOWN FILES {% include links/component-guideline-link.html linktext="Tekst der skal blive til link" %} -------- {%- endcomment -%} ``` -------------------------------- ### Checkbox example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/search/index.html Example of checkboxes. ```html
Tjekbokse
``` -------------------------------- ### Init - Standard init Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/kom-i-gang/implementering-kode/hent-kodepakken/index.html Eksempel på initialisering af DKFDS ved DOM ready. ```javascript document.addEventListener("DOMContentLoaded", function(){ DKFDS.init(); }); ``` -------------------------------- ### Accordion Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/search/index.html This is an example of an accordion component. ```html

``` -------------------------------- ### Example Opsummering 1 Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/4-eksempler/3-templates/opsummering/opsummering-1.html Example of a summary page in a self-service solution. ```html
  • Trin 1: Vælg
  • Trin 2: Udfyld
  • Trin 3: Opsummer
  • Trin 4: Bekræft

Opsummering

Gennemgå dine oplysninger nedenfor. Du kan gå tilbage og rette dine oplysninger ved at klikke på "Tilbage" eller ved at klikke på det trin, du ønsker at redigere.

Dine oplysninger

Personlige oplysninger

Rediger

Navn: Jens Hansen

Adresse: Vestergade 10, 8000 Aarhus C

Email: jens.hansen@example.com

Betalingsoplysninger

Rediger

Kortnummer: **** **** **** 1234

Udløbsdato: 12/25

``` -------------------------------- ### Example Link Generation Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/_includes/links/example-link.html This snippet shows how to generate different link texts based on input. ```html {%- assign link = include.linktext | downcase -%} {%- case link -%} {%- when "header med navigation og søgefelt" -%} [{{ include.linktext }}](/eksempel/header-with-navigation/) {%- when "simpel footer" -%} [{{ include.linktext }}](/eksempel/footer-simple/) {%- when "footer med tre kolonner" -%} [{{ include.linktext }}](/eksempel/footer-three-columns/) {%- when "footer med fire kolonner" -%} [{{ include.linktext }}](/eksempel/footer-four-columns/) {%- when "kompleks footer" -%} [{{ include.linktext }}](/eksempel/footer-complex/) {%- when "footer med logo" -%} [{{ include.linktext }}](/eksempel/footer-logo/) {%- when "se eksemplet på en ny side" -%} [{{ include.linktext }}](/eksempel/when-bike-responsive/) {%- when "se fungerende eksempel på implementering af toastbesked" -%} [{{ include.linktext }}](/eksempel/toastbesked/) {%- else -%} {{ include.linktext }} {%- endcase -%} ``` -------------------------------- ### Example Opsummering 2 Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/pages/4-eksempler/3-templates/opsummering/opsummering-2.html Example of a summary page in a self-service solution. ```html {% include code/demo.html component="example-opsummering-2" %} ``` -------------------------------- ### Anchor link example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/eksempel/anchorlinks/index.html This example shows how to create anchor links within a page. The first link is a skip-to-content link, and the subsequent links are for navigation within the page content. ```html [Gå til sidens indhold](#main-content) Indhold på siden ---------------- * [Æbler](#) * [Pærer](#) * [Bananer](#) ``` -------------------------------- ### Secondary Link Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/styleguide/typografi/links/index.html Example of a secondary link with its design values. ```html Sekundært link ``` -------------------------------- ### Dropdown Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/eksempel/test-dropdown-6/index.html Example of a dropdown with a required label and error message. ```html
  • Mulighed 1
  • Mulighed 2
  • Mulighed 3

Fejl: Der er sket en fejl

``` -------------------------------- ### Loading button example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/eksempel/test-loading-button/index.html This example demonstrates a button with a loading spinner that appears when clicked and disappears after a delay. It also handles preventing further clicks while the spinner is active. ```javascript document.addEventListener("DOMContentLoaded", function() { function getCurrentTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } document.getElementById('test-1').addEventListener('click', function(e) { if (this.classList.contains('spinner-active')) { e.preventDefault(); console.log('Prevented click'); } else { this.classList.add('spinner-active'); this.querySelector('span').classList.add('text-hidden'); this.setAttribute('aria-disabled', true); document.getElementById('test-1-message').textContent = 'Gemmer'; let spinner = document.createElement('span'); spinner.classList.add('spinner', 'spinner-small', 'spinner-light'); this.prepend(spinner); setTimeout(() => { this.classList.remove('spinner-active'); this.querySelector('.spinner').remove(); this.querySelector('span').classList.remove( 'text-hidden'); this.removeAttribute('aria-disabled'); document.getElementById('test-1-message') .textContent = 'Gemt ' + getCurrentTime(); }, 4000); } }); document.getElementById('test-long-text').addEventListener('click', function(e) { if (this.classList.contains('spinner-active')) { e.preventDefault(); console.log('Prevented click'); } else { this.classList.add('spinner-active'); this.querySelector('span').classList.add('text-hidden'); this.setAttribute('aria-disabled', true); document.getElementById('test-long-text-message') .textContent = 'Gemmer'; let spinner = document.createElement('span'); spinner.classList.add('spinner', 'spinner-small'); this.prepend(spinner); setTimeout(() => { this.classList.remove('spinner-active'); this.querySelector('.spinner').remove(); this.querySelector('span').classList.remove( 'text-hidden'); this.removeAttribute('aria-disabled'); document.getElementById('test-long-text-message') .textContent = 'Gemt ' + getCurrentTime(); }, 4000); } }); document.getElementById('test-2').addEventListener('click', function(e) { if (this.classList.contains('spinner-active')) { e.preventDefault(); console.log('Prevented click'); } else { this.classList.add('spinner-active'); this.querySelector('.icon-svg').classList.add('text-hidden'); this.setAttribute('aria-disabled', true); document.getElementById('test-2-message').textContent = 'Gemmer'; let spinner = document.createElement('span'); spinner.classList.add('spinner', 'spinner-small'); this.prepend(spinner); setTimeout(() => { this.clas ``` -------------------------------- ### Dropdown Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/eksempel/test-dropdown-7/index.html Demonstrates a dropdown with a label, help text, error message, and options. ```html Dropdown label Dette er en hjælpetekst Fejl: Der er sket en fejl Mulighed 1 Mulighed 2 Mulighed 3 ``` -------------------------------- ### Radio Button Example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/search/index.html Example of radio buttons. ```html Radioknapper Valg 1 Valg 2 Valg 3 ``` -------------------------------- ### Breadcrumbs example Source: https://github.com/detfaellesdesignsystem/dkfds-docs/blob/master/docs/search/index.html Example of a breadcrumb navigation component. ```html