altinn-designsystem/dist/patterns/02-organismer-70-Modal-innhold-_93-delegering-roller/02-organismer-70-Modal-innhold-_93-delegering-roller.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-70-Modal-innhold-_93-delegering-roller -->
<div class="modal-body a-modal-body">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-7">
      <!-- START: 01-molekyler-00-tekst-03-person-rolle -->
      <div class="a-personRole ">

        <div class="d-none d-md-block">
          <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
          <i class="ai ai-private  ai-lg "></i>


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

        </div>
        <div class="a-personRole-text" title="William Mjelde">
          <span class="a-personRole-role">Styremedlem</span>
          <span class="a-personRole-name">William Mjelde</span>
        </div>
      </div>

      <!-- END: 01-molekyler-00-tekst-03-person-rolle -->

    </div>

  </div>
  <div class="row">
    <div class="col-12 col-lg-6 mt-4">
      <div class="a-textSizeS a-fontBold">
        Søk:
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-6 mb-1">
      <!-- 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-generic">Søk</label>

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


          <input class="form-control  
         " type="text" placeholder="f.eks placeholder" name="input-field" data-val="true" id="text-input-generic">




        </div>


      </div>

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

    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="mt-1 mb-2">
        <!-- START: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
        <div class="a-list-heading">
          <!-- START: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
          <!-- START: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel JS doc: toggleFilter.js -->
          <div class="a-collapse">
            <div class="a-dotted">
              <div class="row">
                <div class="col">
                  <h2 class="a-collapseHeader a-h3 a-collapseHeader-with-actions">
                    <a data-toggle="collapse" href="#" data-target="#exp-list-1" aria-expanded="" aria-controls="exp-list-1" class="a-collapse-title a-collapse-title--absolute no-decoration  collapsed ">
                <span class="a-dropdownArrow"></span> <span>Dette er en utvidbar tittel med merkelapp <span class='badge badge-primary a-label badge-pill'>1</span> og lang tekst for å teste hvordan det ser ut</span> <span class="a-js-none"></span>
            </a>
                  </h2>
                </div>
                <div class="col-auto">
                  <div class="a-list-heading-action" tabindex="0">
                    <span class="d-none d-md-block">
              Høyrejustert tekst
            </span>
                    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                    <i class="ai ai-circle-minus  a-danger "></i>


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

                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- END: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel -->


          <!-- END: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->

        </div>
        <div id="exp-list-1" class="a-collapseContent collapse " aria-expanded="false" role="">
          <!-- 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">
                <div class="row ">
                  <div class="col">
                    <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                    Første rad







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

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

                    Andre rad







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

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

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


          <div class="row">
            <div class="col-12 mt-2">
              <!-- START: 00-atomer-02-lenker-00-link -->
              <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" ">
  En lenke ser slik ut
  
</a>
              <!-- END: 00-atomer-02-lenker-00-link -->

            </div>
          </div>
        </div>
        <!-- END: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->

      </div>
    </div>
  </div>

</div>
<!-- END: 02-organismer-70-Modal-innhold-_93-delegering-roller -->