altinn-designsystem/dist/patterns/02-organismer-_49-ekspanderbart-panel-innhold-20-varsling-enkelttjenester/02-organismer-_49-ekspanderbart-panel-innhold-20-varsling-enkelttjenester.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-20-varsling-enkelttjenester -->
<div class="row">
  <div class="col">
    <h3 class="a-fontBold a-fontSizeM">
      Ipsum lorem
    </h3>
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-6 mb-3">
    <!-- 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="serviceListIdInput">Finn skjema eller tjeneste</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-document   "    ></i>


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


        <input class="form-control a-js-autocomplete  a-hasIcon 
         a-hasButton  " type="search" placeholder="Finn skjema eller tjeneste" name="input-field" data-val="true" id="serviceListIdInput" data-search-algorithm="show-and-highlight" data-search-target="serviceListId">

        <div class="input-group-append">
          <button class="btn btn-secondary" type="button">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search   "    ></i>


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

              <span class="sr-only">Søk</span>
          </button>
        </div>



      </div>
      <div class="a-autocomplete-container d-none d-sm-block">
      </div>


    </div>

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

  </div>
</div>
<div class="row">
  <div class="col-12">
    <h3 class="a-fontBold a-fontSizeM">
      Liste header
    </h3>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
    <div class="a-list-container ">
      <ul class="a-list   a-list-borderTop ">
        <li class="a-dotted a-success a-danger a-selected a-selectable" tabindex="0">
          <div class="row ">
            <div class="col-11">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              Dette er linje 1.






              <span class="sr-only"> 
    Trykk for å slette varsel
     </span>






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

            </div>
            <div class="col text-right">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-circle-exit  a-danger "></i>


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






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

            </div>
          </div>
        </li>
        <li class="a-dotted a-success a-danger a-selected a-selectable" tabindex="0">
          <div class="row ">
            <div class="col-11">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              Dette er den andre linjen.






              <span class="sr-only"> 
    Trykk for å slette varsel
     </span>






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

            </div>
            <div class="col text-right">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-circle-exit  a-danger "></i>


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






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

            </div>
          </div>
        </li>
        <li class="a-dotted a-success a-danger a-selected a-selectable" tabindex="0">
          <div class="row ">
            <div class="col-11">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              Dette er den tredje linjen.






              <span class="sr-only"> 
    Trykk for å slette varsel
     </span>






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

            </div>
            <div class="col text-right">
              <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-circle-exit  a-danger "></i>


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






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

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

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

  </div>
</div>

<div class="row">
  <div class="col mt-3">
    <!-- START: 00-atomer-03-knapper-10-knapp -->
    <button type="button" class="a-btn a-btn-success mr-1 ">
  
    Lagre
  
</button>

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

    <!-- START: 00-atomer-02-lenker-00-link -->
    <a href="javascript:$('#alertsIndividualServices').hide(); $('#myContactFor').show();" class=" ">
  Avbryt
  
</a>
    <!-- END: 00-atomer-02-lenker-00-link -->

  </div>
</div>
<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-20-varsling-enkelttjenester -->