altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
197 lines (123 loc) • 7.59 kB
HTML
<!-- START: 02-organismer-50-ekspanderbart-panel-90-altinnett-varslingsprofil 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="myContactInfoHeader" role="tab">
<a href="#" data-toggle="collapse" data-target="#myContactInfo" aria-expanded="false" aria-controls="myContactInfo">
<!-- 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 "><img src="" /></div>
<div class="a-iconText-text">
<span class="a-iconText-text-large">Din varslingsprofil </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div id="myContactInfo" class="a-collapsePanel-body collapse " data-parent="#accordion" role="tabpanel" aria-labelledby="myContactInfoHeader">
<div class="a-collapsePanel-body-content">
<!-- START: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->
<div class="row mb-1">
<div class="col-lg-7">
<h2 class="a-legend">Din kontaktinformasjon:</h2>
<!-- 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-epost">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="test@testesen.no" name="email-field" data-val="true" id="text-input-epost" required 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 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 -->
<!-- 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-10">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="123 12 123" name="input-field" data-val="true" id="text-input-10" data-val-regex="Telefonnummer må bestå av 8 siffer" data-val-regex-pattern=""[0-9]{8}"">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div id="alert" class="a-message a-message-default mt-0 mb-2">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<b>Obs!</b> Mobilnummer er valgfritt, men må skrives inn om du ønsker varsel på SMS.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-generic">Organisasjon:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="Navn på organisasjon" name="input-field" data-val="true" id="text-input-generic">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12">
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Hvilke varslingstjenester vil du melde deg på?</legend>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 1</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 2</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 3</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Roller og deltakelse i møtefora:</legend>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på rolle 1</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på rolle 2</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på rolle 3</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Sider du abonnerer på:</legend>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Tittel på siden (lenkes til siden)</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mt-1">
Meld meg på
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-90-altinnett-varslingsprofil -->