demo.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Designsystemet</title>
  <link rel="stylesheet" href="https://altinncdn.no/fonts/inter/inter.css" />
  <link rel="stylesheet" href="src/index.css" />
  <!-- Custom theme from https://theme.designsystemet.no -->
  <link rel="stylesheet" href="design-tokens-build/patentstyret.css" />
  <!-- Digdir theme -->
  <!-- <link rel="stylesheet" href="node_modules/@digdir/designsystemet-theme/brand/digdir.css" /> -->
  <link rel="stylesheet" href="node_modules/@digdir/designsystemet-css/dist/src/index.css" />
</head>

<body data-color="primary" data-color-scheme="light">
  <div class="components">
    <div class="card shoppinglist">
      <fieldset class="ds-fieldset">
        <legend class="ds-label" data-weight="medium">Handleliste</legend>
        <div class="ds-field"><input class="ds-input" type="checkbox" value="mat" id=":m3zls9tyk73">
          <label class="ds-label" data-weight="regular" for=":m3zls9tyk73">Mat</label>
        </div>
        <div class="ds-field"><input class="ds-input" type="checkbox" value="leker" id=":m3zls9tzhie">
          <label class="ds-label" data-weight="regular" for=":m3zls9tzhie">Leker</label>
        </div>
        <div class="ds-field"><input class="ds-input" type="checkbox" value="godbiter" checked="" id=":m3zls9tzsf2">
          <label class="ds-label" data-weight="regular" for=":m3zls9tzsf2">Godbiter</label>
        </div>
        <div class="ds-field"><input class="ds-input" type="checkbox" value="kattesand" checked="" id=":m3zls9tzyp6">
          <label class="ds-label" data-weight="regular" for=":m3zls9tzyp6">Kattesand</label>
        </div>
      </fieldset>
      <hr aria-hidden="true" class="ds-divider">
      <fieldset class="ds-fieldset" name="levering">
        <legend class="ds-label" data-weight="medium">Ønsker du levering?</legend>
        <div class="ds-field">
          <input class="ds-input" type="radio" name="levering" value="epost" id=":m3zls9tz9yf">
          <label class="ds-label" data-weight="regular" for=":m3zls9tz9yf">Ja</label>
        </div>
        <div class="ds-field">
          <input class="ds-input" type="radio" name="levering" value="telefon" checked="" id=":m3zls9tz0wn">
          <label class="ds-label" data-weight="regular" for=":m3zls9tz0wn">Nei</label>
        </div>
      </fieldset>
    </div>
    <div class="card user">
      <h2 class="ds-heading" data-size="2xs">Opprett ny bruker</h2>
      <div class="ds-field">
        <label class="ds-label" data-weight="medium" for=":m3zls9tzpe9">Navn</label>
        <div class="ds-field-affixes">
          <input class="ds-input" type="text" placeholder="Ola Normann" id=":m3zls9tzpe9">
        </div>
      </div>
      <div class="ds-field">
        <label class="ds-label" data-weight="medium" for=":m3zls9tzywy">E-post</label>
        <select class="ds-input" type="email" placeholder="ola@norge.no" id=":m3zls9tzywy">
          <option value="opt1">opt1</option>"
          <option value="opt2">opt2</option>"
          <option value="opt3">opt3</option>"
        </select>
      </div>
      <a class="ds-link" href="#">Glemt passord?</a>
      <button class="ds-button" data-variant="primary" type="button">Opprett ny bruker</button>
    </div>
    <div class="card help" data-color="katt">
      <h2 class="ds-heading" data-size="2xs">Dyr</h2>
      <div class="ds-card">
        <h2 class="ds-heading">Tamkatt 🐈</h2>
        <p class="ds-paragraph" data-variant="default">Tamkatt er et lite <a class="ds-link"
            href="https://no.wikipedia.org/wiki/Rovpattedyr" target="_blank">rovpattedyr</a>i <a class="ds-link"
            href="https://no.wikipedia.org/wiki/Kattefamilien" target="_blank">kattefamilien </a>og inngår i
          tamkattlinjen
          . Tamkatten deles videre inn som enten huskatter (naturlig seleksjon) eller rasekatter (selektiv utvelgelse).
        </p>
      </div>
      <div class="ds-card" data-color="frosk">
        <h2 class="ds-heading">Frosk 🐸</h2>
        <p class="ds-paragraph" data-variant="default">Frosker tilhører ordenen <a class="ds-link"
            href="https://no.wikipedia.org/wiki/Springpadder" target="_blank">haleløse amfibier</a>. På norsk er
          begrepet
          frosk ikke en systematisk enhet, men en fellesbetegnelse på haleløse padder som er relativt slanke og
          langlemmete og har fuktig hud, i motsetning til uttrykket padde, som brukes om mer tungbygde haleløse padder
          med
          tørrere hud som krabber mer enn de hopper.</p>
      </div>
      <div class="ds-card" data-color="hund">
        <h2 class="ds-heading">Hund 🐶</h2>
        <p class="ds-paragraph" data-variant="default">Hund eller tamhund (Canis familiaris eller Canis lupus
          familiaris)
          er eit mellomstort domestisert rovpattedyr i hundefamilien, som har følgt mennesket og bidrege til menneskeleg
          suksess gjennom fleire tusen år. Både hund og katt er rekna som viktige kjæledyr, sjølv om begge er rovdyr.
        </p>
      </div>
    </div>
  </div>
</body>

</html>