altinn-designsystem/dist/patterns/02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding/02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding -->
<div class="modal-content">
  <div class="modal-header a-modal-header">
    <div class="a-iconText a-iconText-background a-iconText-large">
      <div class="a-iconText-icon">
        <i class="ai ai-send a-icon" aria-hidden="true"></i>
      </div>
      <h1 class="a-iconText-text mb-0">
        <span class="a-iconText-text-large">Meld deg på varslingstjenesten vår</span>
      </h1>
    </div>
  </div>
  <div class="modal-body a-modal-body">
    <!-- START: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->

    <div class="row mb-1">
      <div class="col-lg-7">
        <h2 class="a-legend">Din kontaktinformasjon:</h2>

        <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

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

          <label class="a-form-label  " for="text-input-epost">Epost: </label>

          <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-closedmessage   "    ></i>


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


            <input class="form-control   a-hasIcon 
         " type="email" placeholder="test@testesen.no" name="email-field" data-val="true" id="text-input-epost" required data-val-regex="Feil epost verdier" data-val-regex-pattern="((&#39;[^&#39;]+&#39;)|(([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+(.([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">




          </div>


          <div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div>
        </div>

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


        <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->

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

          <label class="a-form-label  " for="text-input-10">SMS:</label>

          <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-phone   "    ></i>


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


            <input class="form-control   a-hasIcon 
         " type="tel" placeholder="123 12 123" name="input-field" data-val="true" id="text-input-10" data-val-regex="Telefonnummer må bestå av 8 siffer" data-val-regex-pattern="&quot;[0-9]{8}&quot;">




          </div>


          <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
        </div>

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


        <!-- START: 00-atomer-07-tekst-00-varsel -->
        <div id="alert" class="a-message a-message-default mt-0 mb-2">
          <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->

          <b>Obs!</b> Mobilnummer er valgfritt, men må skrives inn om du ønsker varsel på SMS.



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

        </div>

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


      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
        <fieldset class="form-group mb-0">
          <legend class="a-legend">Hvilke varslingstjenester vil du melde deg på?</legend>
          <div class="custom-control  custom-checkbox a-custom-checkbox  ">
            <input type="checkbox" id="" class="custom-control-input">
            <label class="custom-control-label " for="">Navn på varslingstjeneste 1</label>
          </div>
          <div class="custom-control  custom-checkbox a-custom-checkbox  ">
            <input type="checkbox" id="" class="custom-control-input">
            <label class="custom-control-label " for="">Navn på varslingstjeneste 2</label>
          </div>
          <div class="custom-control  custom-checkbox a-custom-checkbox  ">
            <input type="checkbox" id="" class="custom-control-input">
            <label class="custom-control-label " for="">Navn på varslingstjeneste 3</label>
          </div>
        </fieldset>

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




        <!-- START: 00-atomer-03-knapper-10-knapp -->
        <button type="button" class="a-btn mt-1">
  
    Meld meg på
  
</button>

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

      </div>
    </div>

    <!-- END: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->

  </div>
</div>

<!-- END: 02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding -->