altinn-designsystem/dist/patterns/01-molekyler-05-lister-20-liste-unummerert-expandable/01-molekyler-05-lister-20-liste-unummerert-expandable.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 01-molekyler-05-lister-20-liste-unummerert-expandable JS doc: listSort.js, compareTo.js -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
  <ul class="a-list  a-list-large    ">
    <li class="a-list-parentRightHolder">
      <a href="#" class="a-list-expandedLink-href">
        <div class="row ">
          <div class="col-2 col-sm-1 col-md-1 col-lg-1">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-private   "></i>


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






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

          </div>
          <div class="col-6 col-sm-4 col-md-6 col-lg-6">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue"> 
    Per Pettersen
     </span>






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

          </div>
          <div class="col-md-3 d-none d-md-block col-md-3 col-lg-3">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue"> 
    
     </span>






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

          </div>
          <div class="col-4 col-sm-7 a-hiddenWhenSelected col-md-2 col-lg-2">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-exclamation  notificationIcon "></i>


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





            <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold textStatus"> 
    Ber om tilgang
     </span>






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

          </div>
        </div>
      </a>
    </li>
    <li class="a-list-parentRightHolder">
      <a href="#" class="a-list-expandedLink-href">
        <div class="row ">
          <div class="col-2 col-sm-1 col-md-1 col-lg-1">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-private   "></i>


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






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

          </div>
          <div class="col-6 col-sm-4 col-md-6 col-lg-6 ">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue noneExpandable"> 
    Ovre Petter Holt
     </span>






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

          </div>
          <div class="col-md-3 d-none d-md-block col-md-3 col-lg-3 ">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue noneExpRole"> 
    Daglig leder
     </span>






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

          </div>
          <div class="col-4 col-sm-7 a-hiddenWhenSelected col-md-2 col-lg-2">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="   notificationIcon d-none "></i>


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





            <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold expandText textStatus"> 
    Gi eller fjern tilgang
     </span>






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

          </div>
        </div>
      </a>
    </li>
    <li class="a-list-parentRightHolder">
      <a href="#nested-list-childRightHolders" class="a-list-expandedLink-href" data-toggle="collapse">
        <div class="row ">
          <div class="col-2 col-sm-1 col-md-1 col-lg-1 expandable-icon collapsed a-btn-shadow-expand">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <span class=" a-dropdownCircleArrow">
<i class="ai ai-expand  ai-xs "    ></i>
  </span>


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






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

          </div>
          <div class="col-10 col-sm-4 col-md-6 col-lg-6 ">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold a-js-sortValue col-md-9 col-lg-9"> 
    StrandaOgLillehammerRegnskap
     </span>





            <span class="a-js-sortValue count col-md-3 col-lg-3"> 
    (7 med tilgang)
     </span>






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

          </div>
          <div class="col-sm-3 d-none d-md-block col-md-3 col-lg-3">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue"> 
    Regnskapsfører
     </span>






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

          </div>
          <div class="col-sm-3 d-none d-md-block col-md-2 col-lg-2">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold expandText"> 
    Se alle med tilgang
     </span>





            <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold hideText"> 
    Skjul alle med tilgang
     </span>






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

          </div>
        </div>
      </a>
      <ul class="a-list  a-list-large    childRightHoldersList collapse " id="nested-list-childRightHolders">
        <li class="childRightHolders">
          <a href="#" class="a-modalLink-href">
            <div class="row ">
              <div class="col-2 col-sm-1 col-md-1 col-lg-1">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="reg reg-client  reg-xs "></i>


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






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

              </div>
              <div class="col-10 col-sm-4 col-md-6 col-lg-6 ">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpandable"> 
    StrandaOgLillehammerRegnskap
     </span>






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

              </div>
              <div class="col-3 d-none d-md-block col-md-3 col-lg-3 noneExpRole">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpRole"> 
    Regnskapsfører
     </span>






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

              </div>
              <div class="a-hiddenWhenSelected d-none d-md-block col-md-2 col-lg-2">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold"> 
    Gi eller fjern tilgang
     </span>






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

              </div>
            </div>
          </a>
        </li>
        <li class="childRightHolders">
          <a href="#" class="a-modalLink-href">
            <div class="row ">
              <div class="col-2 col-sm-1 col-md-1 col-lg-1">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-private   "></i>


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






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

              </div>
              <div class="col-10 col-sm-4 col-md-6 col-lg-6 ">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpandable"> 
    Tuva Landro
     </span>






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

              </div>
              <div class="col-3 d-none d-md-block col-md-3 col-lg-3 ">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpRole"> 
    Regnskapsfører
     </span>






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

              </div>
              <div class="a-hiddenWhenSelected d-none d-md-block col-md-2 col-lg-2">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold"> 
    Gi eller fjern tilgang
     </span>






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

              </div>
            </div>
          </a>
        </li>
        <li class="childRightHolders">
          <a href="#" class="a-modalLink-href">
            <div class="row ">
              <div class="col-2 col-sm-1 col-md-1 col-lg-1">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-private   "></i>


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






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

              </div>
              <div class="col-10 col-sm-4 col-md-6 col-lg-6 ">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpandable"> 
    Eskil Tessem
     </span>






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

              </div>
              <div class="col-3 d-none d-md-block col-md-3 col-lg-3 ">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-js-sortValue noneExpRole"> 
    Regnskapsfører
     </span>






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

              </div>
              <div class="a-hiddenWhenSelected d-none d-md-block col-md-2 col-lg-2">
                <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                <span class="a-btn-blue-noUnderline a-js-sortValue  a-fontBold"> 
    Gi eller fjern tilgang
     </span>






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

              </div>
            </div>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->

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