altinn-designsystem/dist/patterns/02-organismer-50-ekspanderbart-panel-_70-felles-kontaktinformasjon/02-organismer-50-ekspanderbart-panel-_70-felles-kontaktinformasjon.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-50-ekspanderbart-panel-_70-felles-kontaktinformasjon JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
  <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="sharedContactInfoHeader" role="tab">
    <a href="#" data-toggle="collapse" data-target="#felleskontaktinfo" aria-expanded="false" aria-controls="felleskontaktinfo">
      <!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
      <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
        <div class="a-iconText-icon ">
          <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
          <i class="ai ai-others  a-icon a-icon-circle "></i>


          <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
        </div>
        <div class="a-iconText-text">
          <span class="a-iconText-text-large">Felles kontaktinformasjon  </span>
        </div>
      </div>

      <!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->

    </a>
  </div>
  <div id="felleskontaktinfo" class="a-collapsePanel-body collapse " data-parent="#accordion" role="tabpanel" aria-labelledby="sharedContactInfoHeader">
    <div class="a-collapsePanel-body-content">
      <div class="row">
        <div class="col-12">

        </div>
        <div class="col-12">
        </div>
        <div class="col-12">

        </div>
      </div>
      <div class="row">
        <div class="col-12 mt-2">
          <h3 class="a-fontBold a-fontSizeM">
            Lorem ipsum
          </h3>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-4">
          <!-- 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-3">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="Mobilnummer" name="input-field" data-val="true" id="text-input-3">




            </div>


          </div>

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

        </div>
        <div class="col-12 col-md-7 pr-md-0">
          <!-- 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-4">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="E-post" name="input-field" data-val="true" id="text-input-4">




            </div>


          </div>

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

        </div>
        <div class="col-1 d-none d-md-block pl-md-0 ">
          <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
          <button type="button" class="a-btn a-btn-icon-transparent pt-3  ">

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


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





</button>


          <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

        </div>
        <div class="col-12 d-md-none mb-3">
          <!-- START: 00-atomer-03-knapper-16-♺-knapp-link-fare -->
          <!-- START: 00-atomer-03-knapper-10-knapp -->
          <button type="button" class="a-btn-link a-linkDanger ">
  <span>
    Lorem
  </span>
</button>

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


          <!-- END: 00-atomer-03-knapper-16-♺-knapp-link-fare -->

        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-4">
          <!-- 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-5">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="Mobilnummer" name="input-field" data-val="true" id="text-input-5">




            </div>


          </div>

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

        </div>
        <div class="col-12 col-md-7 pr-md-0">
          <!-- 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-6">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="E-post" name="input-field" data-val="true" id="text-input-6">




            </div>


          </div>

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

        </div>
        <div class="col-1 d-none d-md-block pl-md-0 ">
          <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
          <button type="button" class="a-btn a-btn-icon-transparent  ">

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


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





</button>


          <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

        </div>
        <div class="col-12 d-md-none mb-3">
          <!-- START: 00-atomer-03-knapper-16-♺-knapp-link-fare -->
          <!-- START: 00-atomer-03-knapper-10-knapp -->
          <button type="button" class="a-btn-link a-linkDanger ">
  <span>
    Lorem
  </span>
</button>

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


          <!-- END: 00-atomer-03-knapper-16-♺-knapp-link-fare -->

        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
          <button type="button" class="a-btn a-btn-action">

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


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

    <span>Legg til</span>

</button>

          <!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->

        </div>
      </div>
      <div class="row">
        <div class="col-12 mt-2">
          <!-- START: 00-atomer-03-knapper-11-♺-knapp-suksess -->
          <!-- START: 00-atomer-03-knapper-10-knapp -->
          <button type="button" class="a-btn a-btn-success ">
  <span>
    Ferdig
  </span>
</button>

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


          <!-- END: 00-atomer-03-knapper-11-♺-knapp-suksess -->

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

<!-- END: 02-organismer-50-ekspanderbart-panel-_70-felles-kontaktinformasjon -->