altinn-designsystem/dist/patterns/02-organismer-30-seksjoner-28-chat/02-organismer-30-seksjoner-28-chat.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-30-seksjoner-28-chat -->
<div class="a-chat" id="chat">
  <p>
    Chat
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
    <i class="ai ai-exit  a-modal-close-icon " id="close-chat"></i>


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

    <div class="a-chat-scrollarea">
      <!-- START: 00-atomer-07-tekst-12-snakkeboble -->
      <div class="a-textBubble  ">
        Hei! Kan jeg hjelpe deg?
        <p class="a-textBubble-metaText">2 minutter siden</p>
      </div>
      <!--


<div class="a-textBubble">
    Snakkebobletest
    <p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->

      <!-- END: 00-atomer-07-tekst-12-snakkeboble -->

      <!-- START: 00-atomer-07-tekst-12-snakkeboble -->
      <div class="a-textBubble a-textBubble-from ">
        Ja, veldig gjerne
        <p class="a-textBubble-metaText">30 sekunder siden</p>
      </div>
      <!--


<div class="a-textBubble">
    Snakkebobletest
    <p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->

      <!-- END: 00-atomer-07-tekst-12-snakkeboble -->

      <!-- START: 00-atomer-07-tekst-12-snakkeboble -->
      <div class="a-textBubble a-textBubble-from ">
        Jeg skal strikke lusekofter og holde kurs i kulturvern. Hva skal jeg søke på?
        <p class="a-textBubble-metaText">Nå</p>
      </div>
      <!--


<div class="a-textBubble">
    Snakkebobletest
    <p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->

      <!-- END: 00-atomer-07-tekst-12-snakkeboble -->

      <!-- START: 00-atomer-07-tekst-12-snakkeboble -->
      <div class="a-textBubble  ">
        ...
      </div>
      <!--


<div class="a-textBubble">
    Snakkebobletest
    <p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->

      <!-- END: 00-atomer-07-tekst-12-snakkeboble -->

    </div>

    <!-- 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="chat">Skriv her</label>

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


        <input class="form-control  
         a-hasButton  " type="text" placeholder="Skriv her" name="input-field" data-val="true" id="chat">

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


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

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



      </div>


    </div>

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


</div>

<!-- END: 02-organismer-30-seksjoner-28-chat -->