altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
127 lines (77 loc) • 4.89 kB
HTML
<!-- START: 03-maler-altinnett-innlogging-skjema-be-om-tilgang -->
<div class="modal-content">
<div class="modal-body a-modal-body">
<div class="mb-4">
<h1 class="a-fontBold a-fontSizeXL mt-1">Be om tilgang</h1>
<p class="lead">Her ber du om tilgang fra ansvarlig person i etaten. Du får en e-post med innloggingsinformasjon når du er godkjent</p>
</div>
<div class="row mb-3">
<div class="col-12 col-lg-8">
<!-- START: 00-atomer-01-forms-51-flervalg-generell -->
<div class="form-group a-form-group mb-2">
<label for="organisation-id" class="a-form-label">Velg organisasjon</label>
<select class="custom-select a-custom-select" name="organisation-id" id="dropdownMenuDefault" required>
<option value="" selected disabled hidden>Velg organisasjon</option>
<option value="Organisasjon 1" >Organisasjon 1</option>
<option value="Organisasjon 2" >Organisasjon 2</option>
<option value="Organisasjon 3" >Organisasjon 3</option>
</select>
</div>
<!-- END: 00-atomer-01-forms-51-flervalg-generell -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="first-name-id">Ditt fornavn</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="first-name-id">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="surname-id">Ditt etternavn</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="surname-id">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="email-id">Din e-post</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="email" name="input-field" data-val="true" id="email-id" data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([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>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div>
<button class="a-btn " data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-kvittering-foresporsel-sendt/03-maler-altinnett-innlogging-kvittering-foresporsel-sendt.markup-only.html"
data-target="#modal" data-is-success="true">
Be om tilgang
</button>
<a class="ml-3" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Avbryt</a>
</div>
<div class="row mt-3">
<div class="col-12 col-lg-6 mb-2">
<h2 class="a-fontBold a-fontSizeXS mb-1">Innlogging gir tilgang til:</h2>
<ul class="no-decoration">
<li class="mb-1"><a href="#">Altinn Studio</a></li>
<li class="mb-1"><a href="#">Oversiktsside</a></li>
<li class="mb-1"><a href="#">SharePoint-løsninger</a></li>
<li class="mb-1"><a href="#">Selvbetjeningsportalen</a></li>
</ul>
</div>
<div class="col-12 col-lg-6 mb-2">
<h2 class="a-fontBold a-fontSizeXS mb-1">Innlogging gir ikke tilgang til:</h2>
<ul class="no-decoration">
<li class="mb-1"><a href="#">Altinn.no</a></li>
<li class="mb-1"><a href="#">TUL</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: 03-maler-altinnett-innlogging-skjema-be-om-tilgang -->