altinn-designsystem/dist/patterns/02-organismer-_49-ekspanderbart-panel-innhold-50-datasystemer/02-organismer-_49-ekspanderbart-panel-innhold-50-datasystemer.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-50-datasystemer -->
<div class="row">
  <div class="col mb-2">
    <h3>
      Datasystemer
    </h3>
    <div class="my-2">
      <!-- START: 00-atomer-07-tekst-00-varsel -->
      <div id="alert" class="a-message a-message-edit a-message--arrow-off a-message--fullwidth ">
        <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

        Endre registrert datasystem



        <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

      </div>

      <!-- END: 00-atomer-07-tekst-00-varsel -->

    </div>
    <p class="a-fontSizeXS mb-1">
      Legg inn et passord her, og bruk det sammen med id-en du får oppgitt i ditt system for å sende inn til Altinn.
    </p>
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-5">
    <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

    <div class="form-group a-form-group   ">

      <label class="a-form-label  sr-only  " for="text-input-computersystem-name">navn på datasystem </label>

      <div class="a-form-group-items input-group   ">


        <input class="form-control  
         " type="text" placeholder="Hva vil du kalle systemet?" name="input-field" data-val="true" id="text-input-computersystem-name">




      </div>


    </div>

    <!-- END: 00-atomer-01-forms-10-tekst-input -->

  </div>
  <div class="col-12 col-md-5">
    <div class="">Datasysten</div>
    <!-- START: 00-atomer-01-forms-50-flervalg-stilisert -->
    <div class="form-group input-group transparent a-js-forceFlexColumn a-form-group">
      <div data-toggle="altinn-dropdown" class="dropdown a-transparent a-fullWidthXs">
        <input type="hidden" class="a-js-altinnDropdown-value" />
        <button class="btn dropdown-toggle a-dropdown-toggle form-control-alt  a-js-dropdownToValidate" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

      <span class="a-form-text ">
        Hvilket system bruker du?
      </span>
    </button>
        <div class="dropdown-menu a-dropdown-menu" aria-labelledby="dropdownMenu">
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Agro Økonimi
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Aksjeservice
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Akvadok
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            AR6 Økonomi
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            ASPECT4 HRM
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Aureus AltUt
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Autodata
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Avendo Skatt
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            BAS
          </span>
          </a>
          <a class="dropdown-item a-dropdown-item" href="#">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-server   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <span class="a-form-text ">
            Bluegarden Paga
          </span>
          </a>
        </div>
      </div>
      <div class="a-message a-message-error a-js-adjustedError" data-valmsg-for="input-field" data-valmsg-replace="false">
        <span class="has-error"></span>
      </div>
    </div>

    <!-- END: 00-atomer-01-forms-50-flervalg-stilisert -->

  </div>
  <div class="col-12 col-md-9 mb-2">
    <!-- START: 00-atomer-07-tekst-00-varsel -->
    <div id="alert-systemname" class="a-message a-message-info a-message--fullwidth mt-0">
      <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

      <b>Obs!</b> Gi systemet et navn slik at du kjenner det igjen. Du kan kalle det hva du vil, men husk at alle som har tilgang til denne profilen kan se det.



      <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

    </div>

    <!-- END: 00-atomer-07-tekst-00-varsel -->

  </div>
</div>
<div class="row">
  <div class="col-12 col-md-5">
    <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

    <div class="form-group a-form-group   ">

      <label class="a-form-label  sr-only  " for="text-input-computersystem-name">passord</label>

      <div class="a-form-group-items input-group   ">


        <input class="form-control  
         " type="password" placeholder="Lag et passord" name="input-field" data-val="true" id="text-input-computersystem-name">




      </div>


    </div>

    <!-- END: 00-atomer-01-forms-10-tekst-input -->

  </div>
  <div class="col-12 col-md-5">
    <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

    <div class="form-group a-form-group   ">

      <label class="a-form-label  sr-only  " for="text-input-computersystem-name">Bekreft passord</label>

      <div class="a-form-group-items input-group   ">


        <input class="form-control  
         " type="password" placeholder="Bekreft passord" name="input-field" data-val="true" id="text-input-computersystem-name">




      </div>


    </div>

    <!-- END: 00-atomer-01-forms-10-tekst-input -->

  </div>
</div>
<div class="row">
  <div class="col mt-1">
    <!-- START: 00-atomer-03-knapper-10-knapp -->
    <button type="button" class="a-btn a-btn-success ">
  
    Legg til
  
</button>

    <!-- END: 00-atomer-03-knapper-10-knapp -->

  </div>
</div>
<div class="row">
  <div clasS="col mt-2">
    <!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
    <div class="a-list-container ">
      <ul class="a-list    ">
        <li class="a-dotted a-selectable" id="firstRow">
          <div class="row ">
            <div class="col-3">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
              <span class="a-fontBold"> 
    ID
     </span>






              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
            <div class="col">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
              <span class="a-fontBold"> 
    Beskrivelse
     </span>






              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
            <div class="col-auto">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
              <span class="a-fontBold"> 
    Handlinger
     </span>






              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
          </div>
        </li>
        <li class="a-dotted a-selectable" id="firstRow">
          <div class="row ">
            <div class="col-3">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              1581







              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
            <div class="col">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              DatasystemEn







              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
            <div class="col-auto">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->



              <!-- START: 00-atomer-02-lenker-36-link-ikon -->
              <a href="#" class="a-linkIcon a-btn-blue-noUnderline pr-0 ">
                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-sm ai-edit   "></i>


                <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

                <span class="d-none d-lg-inline a-fontSizeXS pr-1">
    Rediger
  </span>
              </a>

              <!-- END: 00-atomer-02-lenker-36-link-ikon -->






              <!-- START: 00-atomer-02-lenker-36-link-ikon -->
              <a href="#" class="a-linkIcon pr-0 ">
                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-circle-exit ai-nw ai-sm ml-0 mr-0 a-danger   "></i>


                <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

                <span class="sr-only">
    Slett
  </span>
              </a>

              <!-- END: 00-atomer-02-lenker-36-link-ikon -->




              <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- END: 01-molekyler-05-lister-00-liste-unummerert -->

  </div>
</div>
<div class="row">
  <div class="col-12 col-md-9">
    <!-- START: 00-atomer-07-tekst-00-varsel -->
    <div id="alert-system-number" class="a-message a-message-info a-message--fullwidth ">
      <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

      Legg til ID nummeret til systemet ditt



      <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

    </div>

    <!-- END: 00-atomer-07-tekst-00-varsel -->

  </div>
</div>

<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-50-datasystemer -->