altinn-designsystem/dist/patterns/02-organismer-20-forms-_70-select-profiles/02-organismer-20-forms-_70-select-profiles.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-20-forms-_70-select-profiles -->
<div id="profile-selection">
  <div class="row mb-1">
    <div class="col-lg-4">
      <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

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


        <div class="a-form-group-items input-group   ">
          <span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-others   "    ></i>


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


          <input class="form-control   a-hasIcon 
         " type="search" placeholder="Søk etter profil" name="input-field" data-val="true" id="search-for-profiles-1">




        </div>


      </div>

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

    </div>
  </div>

  <div class="row">
    <div class="col-12 col-lg-4">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input">
        <label class="custom-control-label " for="">Velg alle</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

      <!-- START: 00-atomer-07-tekst-04-merkelapp -->
      <span class="badge badge-primary a-bgBlueLighter a-label badge-pill" id="profiles-selected">2 profiler valgt</span>

      <!-- END: 00-atomer-07-tekst-04-merkelapp -->

    </div>

    <div class="col-12 col-lg-2">
    </div>

    <div class="col-12 col-lg-3">
    </div>
    <div class="col-12 col-lg-3">
    </div>
  </div>

  <!-- START: 01-molekyler-05-forms-01-nestede-avkrysningsbokser -->

  <div class="row" id='forSelectionList'>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input">
        <label class="custom-control-label " for=""><b>Organisasjon 1 AS</b> org. nr. 123 456 001</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input">
        <label class="custom-control-label " for=""><b>Organisasjon 2 AS</b> org. nr. 123 456 002</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input">
        <label class="custom-control-label " for=""><b>Organisasjon 3 AS</b> org. nr. 123 456 003</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input">
        <label class="custom-control-label " for=""><b>Organisasjon 4 AS</b> org. nr. 123 456 004</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-02-lenker-36-link-ikon -->
      <a href="#" class="a-linkIcon ">
        <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
        <i class="ai ai-nw ai-nw-pr ai-plus   "></i>


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

        <span class="a-fontBold">
    Last flere
  </span>
      </a>

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

    </div>
  </div>

  <!-- END: 01-molekyler-05-forms-01-nestede-avkrysningsbokser -->

  <!-- START: 01-molekyler-05-forms-01-nestede-avkrysningsbokser -->

  <div class="row" id='selectedProfiles'>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input" checked="checked">
        <label class="custom-control-label " for=""><b>Organisasjon 5 AS</b> org. nr. 123 456 005</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
      <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
      <div class="custom-control  custom-checkbox a-custom-checkbox  ">
        <input type="checkbox" id="" class="custom-control-input" checked="checked">
        <label class="custom-control-label " for=""><b>Organisasjon 6 AS</b> org. nr. 123 456 006</label>
      </div>

      <!-- END: 00-atomer-01-forms-00-avkrysningsboks -->

    </div>
    <div class="col-12">
      <hr class="m-0 mb-1  a-hrLight">
    </div>
  </div>

  <!-- END: 01-molekyler-05-forms-01-nestede-avkrysningsbokser -->

</div>
<!-- END: 02-organismer-20-forms-_70-select-profiles -->