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

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-70-Modal-innhold-_94-delegering-tildel -->
<div class="modal-body a-modal-body">
  <div class="row">
    <div class="col-12">
      <div class="a-fontSizeS">
        Liten tekst
      </div>
      <span class="a-fontSizeL">
          Stor tekst
        </span>
    </div>
  </div>
  <div class="row">
    <div class="col-12 mb-1">
      <h2 class="mb-0 a-fontBold a-fontSizeM">
        Roller underoverskrift
      </h2>
      <span>
          Tekst under overskrift
        </span>
    </div>
    <div class="col-12 mb-1">
      <span class="pr-1">
            Tekst har roller:
          </span>
      <!-- START: 00-atomer-01-forms-03-valgknapp -->
      <div class="a-switch   ">
        <input id="checkbutton-deactivated-roles-1" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-1" value="checkbutton-read" disabled>
        <label for="checkbutton-deactivated-roles-1" class="a-switch-label disabled">
        <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write   "    ></i>


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

      Eksempel på deaktivert
    </label>
      </div>
      <div class="a-switch   ">
        <input id="checkbutton-deactivated-roles-2" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-2" value="checkbutton-read" disabled>
        <label for="checkbutton-deactivated-roles-2" class="a-switch-label disabled">
        <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign   "    ></i>


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

      Eksempel på deaktivert
    </label>
      </div>

      <!-- END: 00-atomer-01-forms-03-valgknapp -->

    </div>
    <div class="col-12 mb-1">
      <span class="pr-1">
            Tekst trenger roller:
          </span>
      <!-- START: 00-atomer-01-forms-03-valgknapp -->
      <div class="a-switch   ">
        <input id="checkbutton-example-roles-1" class="sr-only" type="checkbox" name="checkbutton-example-roles-1" value="checkbutton-read">
        <label for="checkbutton-example-roles-1" class="a-switch-label ">
      Eksempel uten ikon
    </label>
      </div>
      <div class="a-switch   ">
        <input id="checkbutton-example-roles-2" class="sr-only" type="checkbox" name="checkbutton-example-roles-2" value="checkbutton-read">
        <label for="checkbutton-example-roles-2" class="a-switch-label ">
      Eksempel uten ikon
    </label>
      </div>
      <div class="a-switch   ">
        <input id="checkbutton-example-roles-3" class="sr-only" type="checkbox" name="checkbutton-example-roles-3" value="checkbutton-read" disabled>
        <label for="checkbutton-example-roles-3" class="a-switch-label disabled">
      Eksempel disabled
    </label>
      </div>

      <!-- END: 00-atomer-01-forms-03-valgknapp -->

      <!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
      <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click" data-popover-class="popover-big"
        data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverWithIconToggle">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconInitial">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon   "    ></i>
  </span>


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

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconExpanded">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit   "    ></i>
  </span>


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

    <span class="sr-only">Vis mer info</span>
</a>



      <div id="popoverWithIconToggle" style="display: none">
        <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

        Dette er en tekst





        <!-- START: 00-atomer-02-lenker-00-link -->
        <a href="http://www.altinn.no" class=" ">
  med en lenke som står i løpende tekst
  
</a>
        <!-- END: 00-atomer-02-lenker-00-link -->


        og man kan ha mer tekst etter.



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

      </div>

      <!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->

    </div>
    <div class="col-12 mb-1">
      <!-- START: 00-atomer-07-tekst-00-varsel -->
      <div id="alert-no-arrow" class="a-message a-message-error a-message--arrow-off a-message--fullwidth ">
        <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

        Dette er en driftsmelding eller endringsinformasjon



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

      </div>

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

    </div>
    <div class="col-xl-12 mt-2">
      <!-- START: 00-atomer-03-knapper-10-knapp -->
      <button type="submit" class="a-btn a-btn-success mb-0">
  
    Fullfør
  
</button>

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

    </div>
    <div class="col-xl-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=" ">
  Lenke som står selvstendig alene
  
</a>
      <!-- END: 00-atomer-02-lenker-00-link -->

    </div>
  </div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_94-delegering-tildel -->