UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

135 lines (86 loc) 4.23 kB
<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-10-innloggingsinformasjon-innhold --> <div class="row"> <div class="col-12"> <h3 class="a-fontBold a-fontSizeM"> Lorem ipsum </h3> </div> <div class="col-12 col-md-5"> <!-- 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-1">Ipsum</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="lorem" name="input-validation" data-val="true" id="text-input-1" required> </div> <div class="a-message a-message-error" data-valmsg-for="input-validation" data-valmsg-replace="true"></div> </div> <!-- END: 00-atomer-01-forms-10-tekst-input --> </div> <div class="col-12 col-md-5 pt-md-3 pt-sm-0 mb-1 a-js-password-link"> <!-- START: 00-atomer-03-knapper-10-knapp --> <button onclick="$(this).closest('.a-js-password-link').hide().next().show().find('input').first().focus();" class="a-btn-link "> <span> Lorem ipsum </span> </button> <!-- END: 00-atomer-03-knapper-10-knapp --> </div> <div class="col-12 col-md-5" style="display: none"> <!-- 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-pw">Lorem</label> <div class="a-form-group-items input-group "> <input class="form-control form-control-noAddon a-hasButton " type="password" placeholder="Larem" name="input-field" data-val="true" id="text-input-pw" onkeyup="setVisibility(this, 'btn-text-input-pw')" autocomplete="off"> <div class="input-group-append"> <button class="btn btn-secondary d-none" type="button" id="btn-text-input-pw" onclick="showPassword(this, 'text-input-pw')"> <span class="show-password-text"> Vis </span> <span class="hide-password-text" style="display: none"> Skjul </span> </button> </div> </div> </div> <!-- END: 00-atomer-01-forms-10-tekst-input --> </div> <div class="col-12 col-md-5"> <!-- 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">Lorem</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="lorem@ipsum.com" name="email-field" data-val="true" id="text-input-3" 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 --> </div> </div> <div class="row"> <div class="col"> <!-- START: 00-atomer-01-forms-00-avkrysningsboks --> <div class="custom-control custom-checkbox a-custom-checkbox "> <input type="checkbox" id="" class="custom-control-input"> <label class="custom-control-label " for="">Lorem ipsom dolor</label> </div> <!-- END: 00-atomer-01-forms-00-avkrysningsboks --> </div> </div> <div class="row"> <div class="col mt-1"> <!-- START: 00-atomer-03-knapper-10-knapp --> <button class="a-btn a-btn-success "> En knapp som antyder suksess </button> <!-- END: 00-atomer-03-knapper-10-knapp --> </div> </div> <!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-10-innloggingsinformasjon-innhold -->