altinn-designsystem/dist/patterns/02-organismer-70-Modal-innhold-20-se-og-fjern-samtykke/02-organismer-70-Modal-innhold-20-se-og-fjern-samtykke.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-70-Modal-innhold-20-se-og-fjern-samtykke -->
<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-read ai-lg   "></i>


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

        </div>
        <div class="a-personRole-text" title="Altinn1 ANS">
          <span class="a-personRole-role">MIDLERTIDIG INNSYN</span>
          <span class="a-personRole-name">Altinn1 ANS</span>
        </div>
      </div>

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

    </div>

    <div class="col-12 col-md pt-1">
      <!-- START: 00-atomer-05-Ekspansjonsknapper-35-knapp-med-popover -->
      <!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
      <button type="button" class="a-btn-link a-linkDanger float-left float-md-right a-js-popover-forceFocus " aria-label="knapp med popover" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="sampleIdPopoverButtoinLink"
        data-popover-class="popover-warning">
  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="false false   "    ></i>


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


    <span>
      Knapp stylet som lenke med popover
    </span>
</button>

      <div>
      </div>
      <div role="popover" id="sampleIdPopoverButtoinLink" class="d-none">
        <div class="pb-1">Dette er en popover tekst</div>
        <!-- START: 00-atomer-03-knapper-10-knapp -->
        <button type="button" class="a-btn a-btn-danger mr-1">
  <span>
    knapp
  </span>
</button>

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

        <!-- START: 00-atomer-03-knapper-10-knapp -->
        <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

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

      </div>

      <!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->

      <!-- END: 00-atomer-05-Ekspansjonsknapper-35-knapp-med-popover -->

    </div>
  </div>
  <div class="row">
    <div class="col">
      <h2 class="mt-4 a-fontSizeS a-fontBold">
        Midlertidig samtykke er gitt
      </h2>
      <p class="a-fontSizeXS mb-1">
        Velkommen til samtykkeløsningen
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h2 class="mt-2 mb-0 a-fontSizeS">
        Følgende informasjon er omfattet av samtykket:
      </h2>
      <!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
      <a data-toggle="collapse" href="#" data-target="#myidtesting" aria-expanded="true" aria-controls="myidtesting" class="a-collapse-title a-collapse-title--flexstart a-fontSizeXS a-fontBold mt-1   no-decoration   ">
   <span class="a-dropdownArrow"></span> 

    <span class="primary-collapse-text">
      Denne teksten kan man trykke på for å se utvidet informasjon om et tema
    </span>
</a>

      <!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->

      <div id="myidtesting" class="a-collapse-body collapse show" aria-expanded="true" role="tabpanel" class="collapse show">
        <p class="a-fontSizeXS pt-1 mb-0 pb-1">
          Tekst 1
        </p>
      </div>
      <!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
      <a data-toggle="collapse" href="#" data-target="#myidtesting2" aria-expanded="true" aria-controls="myidtesting2" class="a-collapse-title a-collapse-title--flexstart a-fontSizeXS a-fontBold mt-1   no-decoration   ">
   <span class="a-dropdownArrow"></span> 

    <span class="primary-collapse-text">
      Denne teksten kan man trykke på for å se utvidet informasjon om et tema
    </span>
</a>

      <!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->

      <div id="myidtesting2" class="a-collapse-body collapse show" aria-expanded="true" role="tabpanel" class="collapse show">
        <p class="a-fontSizeXS pt-1 mb-0 pb-1">
          Tekst 2
        </p>
      </div>
      <!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
      <a data-toggle="collapse" href="#" data-target="#myidtesting3" aria-expanded="true" aria-controls="myidtesting3" class="a-collapse-title a-collapse-title--flexstart a-fontSizeXS a-fontBold mt-1   no-decoration   ">
   <span class="a-dropdownArrow"></span> 

    <span class="primary-collapse-text">
      Denne teksten kan man trykke på for å se utvidet informasjon om et tema
    </span>
</a>

      <!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->

      <div id="myidtesting3" class="a-collapse-body collapse show" aria-expanded="true" role="tabpanel" class="collapse show">
        <p class="a-fontSizeXS pt-1 mb-0 pb-1">
          Tekst 3
        </p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <p class="mt-2 a-fontBold a-fontSizeXS mb-1">
        Dette innsynet er tidsavgrenset og vil gå ut .....
      </p>
    </div>
  </div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-20-se-og-fjern-samtykke -->