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

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-80-Modal-js-innhold-90-altinnett-varslinger -->
<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">Opprett varsel</span>
      </h1>
    </div>
  </div>
  <div class="modal-body a-modal-body">
    <!-- START: 02-organismer-20-forms-90-altinnett-skjema-varsling -->
    <div class="row">
      <div class="col-lg-8">

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

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

          <label class="a-form-label  " for="text-input-generic">Tittel:</label>

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


            <input class="form-control  
         " type="text" placeholder="Navn på varsel" name="input-field" data-val="true" id="text-input-generic">




          </div>


        </div>

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


        <!-- START: 00-atomer-01-forms-40-tekstfelt -->
        <div class="form-group a-form-group mb-1">
          <label for="text-input-generic" class="a-form-label">Beskrivelse:</label>
          <textarea class="form-control a-textarea" rows="3" placeholder="Tekst som vises i varsel" name="input-field" id="text-input-generic"></textarea>
        </div>

        <!-- END: 00-atomer-01-forms-40-tekstfelt -->


        <!-- START: 00-atomer-01-forms-51-flervalg-generell -->
        <div class="form-group a-form-group a-stacked-label">
          <label for="primaryEmail" class="a-form-label">Kategori:</label>
          <select class="custom-select a-custom-select" name="primaryEmail" id="dropdownMenuDefault">
    <option value="Velg kategori" selected>Velg kategori</option>
      <option value="Serverdrift" >Serverdrift</option>
      <option value="Applikasjonsforvaltning" >Applikasjonsforvaltning</option>
      <option value="Statusmøte drift" >Statusmøte drift</option>
  </select>
        </div>

        <!-- END: 00-atomer-01-forms-51-flervalg-generell -->


        <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
        <label class="  an-stackedLabel " for="fromDate">
  <span class="a-input-labelText control-label">
    Gyldig fra:
  </span>
</label>
        <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
          <div class="input-group">
            <input type="text" id="fromDate" class="form-control a-hasButton  date" />

            <div class="input-group-prepend a-icon-right">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-date   "></i>


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

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

        <!-- END: 00-atomer-01-forms-60-datovelger -->


        <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
        <label class="  an-stackedLabel " for="toDate">
  <span class="a-input-labelText control-label">
    Gyldig til:
  </span>
</label>
        <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
          <div class="input-group">
            <input type="text" id="toDate" class="form-control a-hasButton  date" />

            <div class="input-group-prepend a-icon-right">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-date   "></i>


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

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

        <!-- END: 00-atomer-01-forms-60-datovelger -->


        <label class="an-stackedLabel" for="">
      Varsel sendes:
    </label>

        <ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#empty" role="tab" aria-expanded="true">
            <span class="custom-control-indicator"></span>
            Ikke send
          </a>
          </li>
          <li class="nav-item">
            <a class="nav-link " data-toggle="tab" href="#email" role="tab" aria-expanded="">
            <span class="custom-control-indicator"></span>
            Epost
          </a>
          </li>
          <li class="nav-item">
            <a class="nav-link " data-toggle="tab" href="#sms-and-email" role="tab" aria-expanded="">
            <span class="custom-control-indicator"></span>
            SMS og Epost
          </a>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="empty" role="tabpanel" aria-expanded="true"></div>

          <div class="tab-pane " id="email" role="tabpanel" aria-expanded="">
            <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
            <label class="mb-1  an-stackedLabel " for="alertDate">
  <span class="a-input-labelText control-label">
    Dato for varsling:
  </span>
</label>
            <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
              <div class="input-group">
                <input type="text" id="alertDate" class="form-control a-hasButton  date" />

                <div class="input-group-prepend a-icon-right">
                  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                  <i class="ai ai-date   "></i>


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

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

            <!-- END: 00-atomer-01-forms-60-datovelger -->


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

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

              <label class="a-form-label  " for="text-input-generic">Klokkeslett for varsling: </label>

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


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




              </div>


            </div>

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

          </div>

          <div class="tab-pane " id="sms-and-email" role="tabpanel" aria-expanded="">
            <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
            <label class="mb-1  an-stackedLabel " for="alertDate">
  <span class="a-input-labelText control-label">
    Dato for varsling:
  </span>
</label>
            <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
              <div class="input-group">
                <input type="text" id="alertDate" class="form-control a-hasButton  date" />

                <div class="input-group-prepend a-icon-right">
                  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                  <i class="ai ai-date   "></i>


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

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

            <!-- END: 00-atomer-01-forms-60-datovelger -->


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

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

              <label class="a-form-label  " for="text-input-generic">Klokkeslett for varsling: </label>

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


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




              </div>


            </div>

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


            <!-- START: 00-atomer-01-forms-40-tekstfelt -->
            <div class="form-group a-form-group ">
              <label for="text-input-generic" class="a-form-label">Tekst i SMS:</label>
              <textarea class="form-control a-textarea" rows="3" placeholder="Denne teksten sendes i SMS" name="input-field" id="text-input-generic"></textarea>
            </div>

            <!-- END: 00-atomer-01-forms-40-tekstfelt -->

          </div>
        </div>

        <!-- START: 00-atomer-03-knapper-10-knapp -->
        <button type="button" class="a-btn mt-2">
  
    Opprett varsel
  
</button>

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

      </div>
    </div>

    <!-- END: 02-organismer-20-forms-90-altinnett-skjema-varsling -->

  </div>
</div>

<!-- END: 02-organismer-80-Modal-js-innhold-90-altinnett-varslinger -->